From ab0de22e72aa0f9f067a39852dd936b80eafa3b2 Mon Sep 17 00:00:00 2001 From: Arnaud Becher Date: Mon, 1 Jun 2020 14:39:37 +0200 Subject: [PATCH] Add configuration panel on demo page (#29) * enhance demo with configuration * auto update code snippet * fix label size slider's interval * Update path.js Co-authored-by: Chase --- docs/home.vue | 238 +++++++++++++++++++++++++++++++++++++---- package.json | 5 +- src/components/bars.js | 12 ++- src/components/path.js | 2 +- src/helpers/path.js | 2 +- 5 files changed, 232 insertions(+), 27 deletions(-) diff --git a/docs/home.vue b/docs/home.vue index 99728ff..a875209 100644 --- a/docs/home.vue +++ b/docs/home.vue @@ -3,18 +3,85 @@

Vue Bars

-

Simple, elegant spark bars for Vue.js

+

Simple, elegant spark bars for Vue.js

-
+
+ + - +
+
+
+
Width
+ +
+ +
+
Rounding
+ +
+ +
+
Padding
+ +
+ +
+
Gradient first color
+ +
+ +
+
Gradient second color
+ +
+
+ +
+ + + +
+
Label color
+ +
+ +
+
Label rotate
+ +
+ +
+
Label size
+ +
+
+
+ + + +
+ + +
+ + @@ -22,20 +89,51 @@ import Bars from '../src/index.js' import hanabi from 'hanabi' import GithubBadge from 'vue-github-badge' + import VueSlider from 'vue-slider-component' + import 'vue-slider-component/theme/default.css' + import VSwatches from 'vue-swatches' + import 'vue-swatches/dist/vue-swatches.css' + import {VueTabs, VTab} from 'vue-nav-tabs' + import 'vue-nav-tabs/themes/vue-tabs.css' export default { - components: { Bars, GithubBadge }, + components: { Bars, GithubBadge, VueSlider, VSwatches, VueTabs, VTab }, - created () { - this.data = [1, 2, 5, 9, 5, 10, 3, 5, 8, 12, 1, 8, 2, 9, 10, 2, 9, 4, 5, 6, 7, 3, 2, 3, 5] - this.gradient = ['#ffbe88', '#ff93df'] - this.code = hanabi(` item.value); + } + }, + + computed: { + code: function(){ + return hanabi(` -`) +`); + } + }, + + created () { + this.data = [{value: 1, title: '#1'}, {value: 2, title: '#2'}, {value: 5, title: '#3'}, {value: 9, title: '#4'}, {value: 5, title: '#5'}, {value: 10, title: '#6'}, {value: 3, title: '#7'}, {value: 5, title: '#8'}, {value: 8, title: '#9'}, {value: 12, title: '#10'}, {value: 1, title: '#11'}, {value: 8, title: '#12'}, {value: 2, title: '#13'}, {value: 9, title: '#14'}, {value: 10, title: '#15'}, {value: 2, title: '#16'}, {value: 9, title: '#17'}, {value: 4, title: '#18'}, {value: 5, title: '#19'}, {value: 6, title: '#20'}, {value: 7, title: '#21'}, {value: 3, title: '#22'}, {value: 2, title: '#23'}, {value: 3, title: '#24'}, {value: 5, title: '#25'}] }, } @@ -44,27 +142,35 @@ h1 { margin: 0; font-size: 3rem; - font-weight: normal; + font-weight: bold; + } + + .headline { + font-family: Courier,Courier New,monospace; + font-size: 15px; + font-weight: 400; + padding: 20px 0; } .main { max-width: 650px; - margin: 15vh auto 20px; - font-family: 'Avenir', Helvetica, Arial, sans-serif; + margin: 5vh auto 20px; + font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; - font-size: 14px; + font-size: 18px; } .code-wrap { text-align: left; background-color: #f8f8f8; - padding: 1.2em 1.4em; + padding: 2em 1.4em; line-height: 1.5em; - margin: 60px 0 0; + margin: 0; overflow: auto; + font-size: 1rem; } .code { @@ -75,9 +181,97 @@ footer { margin-top: 40px; line-height: 2; + font-size: 0.8rem; + color: #c1c1c1; + font-family: Courier,Courier New,monospace; } a { - color: #42b983; + color: #39fda4; + } + + .setting-label { + text-align: left; + font-size: 1rem; + font-weight: 700; + padding-top: 1rem; } + + .settings-container { + display: flex; + } + + @media only screen and (max-width: 480px) { + .settings-container { + display:block + } + } + + .tab-content { + background: #f7f7f7; + } + + .settings-column { + flex: auto; + margin: 2rem 2rem 0; + padding-bottom: 2rem; + } + + .vue-swatches { + display: flex; + } + + .vue-swatches__wrapper { + padding-left: 0 !important; + } + + .vue-swatches__container { + padding: 5px 0 0 !important; + margin-bottom: 0 !important; + } + + .control { + display: flex; + align-items: center; + padding-top: 14px; + } + .control__indicator { + margin-right: .25rem; + width: 1rem; + height: 1rem; + background-color: #ccc; + border-radius: 3px; + } + .control__input:focus ~ .control__indicator { + box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5); + } + .control__input:checked ~ .control__indicator { + background-color: #3498db; + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMkw0LjggMTJsLTEuNCAxLjRMOSAxOSAyMSA3bC0xLjQtMS40TDkgMTYuMnoiLz48L3N2Zz4='); + background-size: 100%; + background-position: center; + background-repeat: no-repeat; + } + /* Visually hide the browser input to ensure it is still focusable via keyboards */ + .visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .checkbox-label { + font-size: 1rem; + padding-left: 5px; + margin-top: 3px; + } + + .vue-tabs .nav>li span.title { + font-weight: 700; + } + diff --git a/package.json b/package.json index 63f3041..8c98a6e 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,9 @@ "rollup-plugin-buble": "^0.19.6", "uglify-js": "^3.4.9", "vbuild": "^7.2.4", - "vue-github-badge": "^1.0.1" + "vue-github-badge": "^1.0.1", + "vue-nav-tabs": "^0.5.7", + "vue-slider-component": "^3.1.4", + "vue-swatches": "^2.0.3" } } diff --git a/src/components/bars.js b/src/components/bars.js index 7b37bd7..268e0f6 100644 --- a/src/components/bars.js +++ b/src/components/bars.js @@ -13,6 +13,10 @@ export default { type: Number, default: 8 }, + rounding: { + type: Number, + default: 2 + }, growDuration: { type: Number, default: 0.5 @@ -49,6 +53,10 @@ export default { type: String, default: '#999999' }, + labelSize: { + type: Number, + default: 0.7 + }, height: Number, width: Number, padding: { @@ -76,8 +84,8 @@ export default { maxY: viewHeight - padding, labelData: this.labelData, labelRotate: this.labelRotate, - labelSize: this.labelSize, - labelColor: this.labelColor + labelColor: this.labelColor, + labelSize: this.labelSize } const props = this.$props diff --git a/src/components/path.js b/src/components/path.js index 9591315..a516521 100644 --- a/src/components/path.js +++ b/src/components/path.js @@ -1,7 +1,7 @@ import { genPoints, genBars, genLabels } from '../helpers/path' export default { - props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'], + props: ['data', 'boundary', 'barWidth', 'rounding', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'], render (h) { const { data, boundary, max, min, labelData } = this diff --git a/src/helpers/path.js b/src/helpers/path.js index 63ebb2d..0d126bf 100644 --- a/src/helpers/path.js +++ b/src/helpers/path.js @@ -44,7 +44,7 @@ export function genPoints (inArr, { minX, minY, maxX, maxY, minBarHeight }, { ma } export function genBars (_this, arr, h) { - const { maxX } = _this.boundary + const { maxX, maxY, labelRotate, labelColor, labelSize } = _this.boundary const totalWidth = (maxX) / (arr.length - 1) if (!_this.barWidth) { _this.barWidth = totalWidth - (_this.padding || 5)