buefy 0.7.9 → 0.8.2

package/src/components/slider/Slider.vue

@@ -0,0 +1,240 @@
+<template>
+    <div
+        class="b-slider"
+        :class="[size, type, rootClasses]">
+        <div
+            class="b-slider-track"
+            @click="onSliderClick"
+            ref="slider">
+            <div
+                class="b-slider-fill"
+                :style="barStyle"/>
+            <template v-if="ticks">
+                <b-slider-tick
+                    v-for="(val, key) in tickValues"
+                    :key="key"
+                    :value="val"/>
+            </template>
+            <slot/>
+            <b-slider-thumb
+                v-model="value1"
+                :type="newTooltipType"
+                :tooltip="tooltip"
+                ref="button1"
+                role="slider"
+                :aria-valuenow="value1"
+                :aria-valuemin="min"
+                :aria-valuemax="max"
+                aria-orientation="horizontal"
+                :aria-label="Array.isArray(ariaLabel) ? ariaLabel[0] : ariaLabel"
+                :aria-disabled="disabled"/>
+            <b-slider-thumb
+                v-model="value2"
+                :type="newTooltipType"
+                :tooltip="tooltip"
+                ref="button2"
+                v-if="isRange"
+                role="slider"
+                :aria-valuenow="value2"
+                :aria-valuemin="min"
+                :aria-valuemax="max"
+                aria-orientation="horizontal"
+                :aria-label="Array.isArray(ariaLabel) ? ariaLabel[1] : ''"
+                :aria-disabled="disabled"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import SliderThumb from './SliderThumb'
+import SliderTick from './SliderTick'
+
+export default {
+    name: 'BSlider',
+    components: {
+        [SliderThumb.name]: SliderThumb,
+        [SliderTick.name]: SliderTick
+    },
+    props: {
+        value: {
+            type: [Number, Array],
+            default: 0
+        },
+        min: {
+            type: Number,
+            default: 0
+        },
+        max: {
+            type: Number,
+            default: 100
+        },
+        step: {
+            type: Number,
+            default: 1
+        },
+        type: {
+            type: String,
+            default: 'is-primary'
+        },
+        size: String,
+        ticks: {
+            type: Boolean,
+            default: false
+        },
+        tooltip: {
+            type: Boolean,
+            default: true
+        },
+        tooltipType: String,
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        ariaLabel: [String, Array]
+    },
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            dragging: false,
+            isRange: false,
+            newTooltipType: this.tooltipType ? this.tooltipType : this.type,
+            _isSlider: true // Used by Thumb and Tick
+        }
+    },
+    computed: {
+        tickValues() {
+            if (!this.ticks || this.min > this.max || this.step === 0) return []
+            const result = []
+            for (let i = this.min + this.step; i < this.max; i = i + this.step) {
+                result.push(i)
+            }
+            return result
+        },
+        minValue() {
+            return Math.min(this.value1, this.value2)
+        },
+        maxValue() {
+            return Math.max(this.value1, this.value2)
+        },
+        barSize() {
+            return this.isRange
+                ? `${100 * (this.maxValue - this.minValue) / (this.max - this.min)}%`
+                : `${100 * (this.value1 - this.min) / (this.max - this.min)}%`
+        },
+        barStart() {
+            return this.isRange
+                ? `${100 * (this.minValue - this.min) / (this.max - this.min)}%`
+                : '0%'
+        },
+        precision() {
+            const precisions = [this.min, this.max, this.step].map((item) => {
+                let decimal = ('' + item).split('.')[1]
+                return decimal ? decimal.length : 0
+            })
+            return Math.max(...precisions)
+        },
+        barStyle() {
+            return {
+                width: this.barSize,
+                left: this.barStart
+            }
+        },
+        sliderSize() {
+            return this.$refs.slider['clientWidth']
+        },
+        rootClasses() {
+            return {
+                'is-rounded': this.rounded,
+                'is-dragging': this.dragging,
+                'is-disabled': this.disabled
+            }
+        }
+    },
+    watch: {
+        /**
+        * When v-model is changed set the new active step.
+        */
+        value(value) {
+            this.setValues(value)
+        },
+        value1(val) {
+            this.isThumbReversed = this.value1 > this.value2
+            if (this.isRange) {
+                this.$emit('input', [this.minValue, this.maxValue])
+            } else {
+                this.$emit('input', val)
+            }
+        },
+        value2(val) {
+            this.isThumbReversed = this.value1 > this.value2
+            if (this.isRange) {
+                this.$emit('input', [this.minValue, this.maxValue])
+            }
+        },
+        min() {
+            this.setValues()
+        },
+        max() {
+            this.setValues()
+        }
+    },
+    methods: {
+        setValues(newValue) {
+            if (this.min > this.max) {
+                return
+            }
+            if (Array.isArray(newValue)) {
+                this.isRange = true
+                const smallValue = typeof newValue[0] !== 'number' || isNaN(newValue[0])
+                    ? this.min
+                    : Math.min(Math.max(this.min, newValue[0]), this.max)
+                const largeValue = typeof newValue[1] !== 'number' || isNaN(newValue[1])
+                    ? this.max
+                    : Math.max(Math.min(this.max, newValue[1]), this.min)
+                this.value1 = this.isThumbReversed ? largeValue : smallValue
+                this.value2 = this.isThumbReversed ? smallValue : largeValue
+            } else {
+                this.isRange = false
+                this.value1 = isNaN(newValue)
+                    ? this.min
+                    : Math.min(this.max, Math.max(this.min, newValue))
+            }
+        },
+        onSliderClick(event) {
+            if (this.disabled || this.dragging) return
+            const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left
+            const percent = (event.clientX - sliderOffsetLeft) / this.sliderSize * 100
+            const targetValue = this.min + percent * (this.max - this.min) / 100
+            const diffFirst = Math.abs(targetValue - this.value1)
+            if (!this.isRange) {
+                if (diffFirst < this.step / 2) return
+                this.$refs.button1.setPosition(percent)
+            } else {
+                const diffSecond = Math.abs(targetValue - this.value2)
+                if (diffFirst <= diffSecond) {
+                    if (diffFirst < this.step / 2) return
+                    this.$refs['button1'].setPosition(percent)
+                } else {
+                    if (diffSecond < this.step / 2) return
+                    this.$refs['button2'].setPosition(percent)
+                }
+            }
+            this.emitChange()
+        },
+        emitChange() {
+            this.$emit('change', this.isRange
+                ? [this.minValue, this.maxValue]
+                : this.value1)
+        }
+    },
+    created() {
+        this.setValues(this.value)
+        this.isThumbReversed = false
+    }
+}
+</script>

package/src/components/slider/SliderThumb.vue

@@ -0,0 +1,188 @@
+<template>
+    <div
+        class="b-slider-thumb-wrapper"
+        :class="{ 'is-dragging': dragging }"
+        :style="wrapperStyle">
+        <b-tooltip
+            :label="value.toString()"
+            :type="type"
+            :always="dragging || isFocused"
+            :active="!disabled && tooltip">
+            <div
+                class="b-slider-thumb"
+                :tabindex="disabled ? false : 0"
+                v-bind="$attrs"
+                @mousedown="onButtonDown"
+                @touchstart="onButtonDown"
+                @focus="onFocus"
+                @blur="onBlur"
+                @keydown.left.prevent="onLeftKeyDown"
+                @keydown.right.prevent="onRightKeyDown"
+                @keydown.down.prevent="onLeftKeyDown"
+                @keydown.up.prevent="onRightKeyDown"
+                @keydown.home.prevent="onHomeKeyDown"
+                @keydown.end.prevent="onEndKeyDown"/>
+        </b-tooltip>
+    </div>
+</template>
+
+<script>
+import Tooltip from '../tooltip/Tooltip'
+export default {
+    name: 'BSliderThumb',
+    components: {
+        [Tooltip.name]: Tooltip
+    },
+    inheritAttrs: false,
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        },
+        type: {
+            type: String,
+            default: ''
+        },
+        tooltip: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            isFocused: false,
+            dragging: false,
+            startX: 0,
+            startPosition: 0,
+            newPosition: null,
+            oldValue: this.value
+        }
+    },
+    computed: {
+        disabled() {
+            return this.$parent.disabled
+        },
+        max() {
+            return this.$parent.max
+        },
+        min() {
+            return this.$parent.min
+        },
+        step() {
+            return this.$parent.step
+        },
+        precision() {
+            return this.$parent.precision
+        },
+        currentPosition() {
+            return `${(this.value - this.min) / (this.max - this.min) * 100}%`
+        },
+        wrapperStyle() {
+            return { left: this.currentPosition }
+        }
+    },
+    watch: {
+        dragging(val) {
+            this.$parent.dragging = val
+        }
+    },
+    methods: {
+        onFocus() {
+            this.isFocused = true
+        },
+        onBlur() {
+            this.isFocused = false
+        },
+        onButtonDown(event) {
+            if (this.disabled) return
+            event.preventDefault()
+            this.onDragStart(event)
+            if (typeof window !== 'undefined') {
+                document.addEventListener('mousemove', this.onDragging)
+                document.addEventListener('touchmove', this.onDragging)
+                document.addEventListener('mouseup', this.onDragEnd)
+                document.addEventListener('touchend', this.onDragEnd)
+                document.addEventListener('contextmenu', this.onDragEnd)
+            }
+        },
+        onLeftKeyDown() {
+            if (this.disabled || this.value === this.min) return
+            this.newPosition = parseFloat(this.currentPosition) -
+                this.step / (this.max - this.min) * 100
+            this.setPosition(this.newPosition)
+            this.$parent.emitChange()
+        },
+        onRightKeyDown() {
+            if (this.disabled || this.value === this.max) return
+            this.newPosition = parseFloat(this.currentPosition) +
+                this.step / (this.max - this.min) * 100
+            this.setPosition(this.newPosition)
+            this.$parent.emitChange()
+        },
+        onHomeKeyDown() {
+            if (this.disabled || this.value === this.min) return
+            this.newPosition = 0
+            this.setPosition(this.newPosition)
+            this.$parent.emitChange()
+        },
+        onEndKeyDown() {
+            if (this.disabled || this.value === this.max) return
+            this.newPosition = 100
+            this.setPosition(this.newPosition)
+            this.$parent.emitChange()
+        },
+        onDragStart(event) {
+            this.dragging = true
+            if (event.type === 'touchstart') {
+                event.clientX = event.touches[0].clientX
+            }
+            this.startX = event.clientX
+            this.startPosition = parseFloat(this.currentPosition)
+            this.newPosition = this.startPosition
+        },
+        onDragging(event) {
+            if (this.dragging) {
+                if (event.type === 'touchmove') {
+                    event.clientX = event.touches[0].clientX
+                }
+                const diff = (event.clientX - this.startX) / this.$parent.sliderSize * 100
+                this.newPosition = this.startPosition + diff
+                this.setPosition(this.newPosition)
+            }
+        },
+        onDragEnd() {
+            if (this.value !== this.oldValue) {
+                this.$parent.emitChange()
+            }
+            setTimeout(() => {
+                // defer to prevent triggering click on the track
+                this.dragging = false
+                this.setPosition(this.newPosition)
+            })
+            if (typeof window !== 'undefined') {
+                document.removeEventListener('mousemove', this.onDragging)
+                document.removeEventListener('touchmove', this.onDragging)
+                document.removeEventListener('mouseup', this.onDragEnd)
+                document.removeEventListener('touchend', this.onDragEnd)
+                document.removeEventListener('contextmenu', this.onDragEnd)
+            }
+        },
+        setPosition(percent) {
+            if (percent === null || isNaN(percent)) return
+            if (percent < 0) {
+                percent = 0
+            } else if (percent > 100) {
+                percent = 100
+            }
+            const stepLength = 100 / ((this.max - this.min) / this.step)
+            const steps = Math.round(percent / stepLength)
+            let value = steps * stepLength / 100 * (this.max - this.min) + this.min
+            value = parseFloat(value.toFixed(this.precision))
+            this.$emit('input', value)
+            if (!this.dragging && value !== this.oldValue) {
+                this.oldValue = value
+            }
+        }
+    }
+}
+</script>

package/src/components/slider/SliderTick.vue

@@ -0,0 +1,43 @@
+<template>
+    <div
+        class="b-slider-tick"
+        :class="{ 'is-tick-hidden': hidden }"
+        :style="getTickStyle(position)">
+        <span v-if="$slots.default" class="b-slider-tick-label">
+            <slot/>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'BSliderTick',
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        }
+    },
+    computed: {
+        position() {
+            const pos = (this.value - this.$parent.min) /
+                (this.$parent.max - this.$parent.min) * 100
+            return (pos >= 0 && pos <= 100) ? pos : 0
+        },
+        hidden() {
+            return this.value === this.$parent.min || this.value === this.$parent.max
+        }
+    },
+    methods: {
+        getTickStyle(position) {
+            return { 'left': position + '%' }
+        }
+    },
+    created() {
+        if (!this.$parent.$data._isSlider) {
+            this.$destroy()
+            throw new Error('You should wrap bSliderTick on a bSlider')
+        }
+    }
+}
+</script>

package/src/components/slider/index.js

@@ -0,0 +1,20 @@
+import Slider from './Slider'
+import SliderTick from './SliderTick'
+
+import { use, registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue) {
+        registerComponent(Vue, Slider)
+        registerComponent(Vue, SliderTick)
+    }
+}
+
+use(Plugin)
+
+export default Plugin
+
+export {
+    Slider,
+    SliderTick
+}

package/src/components/snackbar/index.js

@@ -33,7 +33,7 @@ const SnackbarProgrammatic = {
 
 const Plugin = {
     install(Vue) {
-        registerComponentProgrammatic(Vue, '$snackbar', SnackbarProgrammatic)
+        registerComponentProgrammatic(Vue, 'snackbar', SnackbarProgrammatic)
     }
 }
 
@@ -42,5 +42,5 @@ use(Plugin)
 export default Plugin
 
 export {
-    SnackbarProgrammatic as Snackbar
+    SnackbarProgrammatic
 }

package/src/components/steps/StepItem.vue

@@ -6,10 +6,9 @@ export default {
         type: String | Object,
         icon: String,
         iconPack: String,
-        clickable: Boolean,
-        completed: {
+        clickable: {
             type: Boolean,
-            default: false
+            default: undefined
         },
         visible: {
             type: Boolean,

package/src/components/steps/Steps.vue

@@ -9,12 +9,12 @@
                     class="step-item"
                     :class="[stepItem.type || type, {
                         'is-active': activeStep === index,
-                        'is-completed': stepItem.completed || activeStep > index
+                        'is-previous': activeStep > index
                 }]">
                     <a
                         class="step-link"
-                        :class="{'is-clickable': isItemClickable(stepItem)}"
-                        @click="isItemClickable(stepItem) && stepClick(index)">
+                        :class="{'is-clickable': isItemClickable(stepItem, index)}"
+                        @click="isItemClickable(stepItem, index) && stepClick(index)">
                         <div class="step-marker">
                             <b-icon
                                 v-if="stepItem.icon"
@@ -187,9 +187,9 @@ export default {
         /**
             * Return if the step should be clickable or not.
             */
-        isItemClickable(stepItem) {
+        isItemClickable(stepItem, index) {
             if (stepItem.clickable === undefined) {
-                return stepItem.completed
+                return this.activeStep > index
             }
             return stepItem.clickable
         },
@@ -213,6 +213,7 @@ export default {
             if (prevItemIdx >= 0) {
                 prevItemIdx = this.stepItems.length - 1 - prevItemIdx
             }
+            this.$emit('input', prevItemIdx)
             this.changeStep(prevItemIdx)
         },
 
@@ -224,6 +225,7 @@ export default {
             const nextItemIdx = this.stepItems.findIndex((step, idx) => {
                 return idx > this.activeStep && step.visible
             })
+            this.$emit('input', nextItemIdx)
             this.changeStep(nextItemIdx)
         }
     },

package/src/components/switch/Switch.spec.js

@@ -8,4 +8,33 @@ describe('BSwitch', () => {
         expect(wrapper.name()).toBe('BSwitch')
         expect(wrapper.isVueInstance()).toBeTruthy()
     })
+
+    it('render correctly', () => {
+        const wrapper = shallowMount(BSwitch)
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('renders input element by default', () => {
+        const wrapper = shallowMount(BSwitch)
+
+        expect(wrapper.contains('input')).toBeTruthy()
+        expect(wrapper.classes()).toContain('switch')
+    })
+
+    it('updates internal value when v-model is changed', () => {
+        const wrapper = shallowMount(BSwitch)
+        const newValue = 'switch value'
+        wrapper.setProps({ value: newValue })
+        expect(wrapper.vm.newValue).toBe(newValue)
+    })
+
+    it('emit input event when computedValue is set', () => {
+        const wrapper = shallowMount(BSwitch)
+        const newValue = 'switch value'
+        wrapper.vm.computedValue = newValue
+        const valueEmitted = wrapper.emitted()['input'][0]
+        expect(wrapper.vm.newValue).toBe(newValue)
+        expect(valueEmitted).toContainEqual(newValue)
+    })
 })

package/src/components/switch/Switch.vue

@@ -1,9 +1,10 @@
 <template>
     <label
         class="switch"
-        :class="[size, { 'is-disabled': disabled }]"
+        :class="newClass"
         ref="label"
         :disabled="disabled"
+        @click="focus"
         @keydown.prevent.enter="$refs.label.click()"
         @mousedown="isMouseDown = true"
         @mouseup="isMouseDown = false"
@@ -12,6 +13,7 @@
         <input
             v-model="computedValue"
             type="checkbox"
+            ref="input"
             @click.stop
             :disabled="disabled"
             :name="name"
@@ -28,19 +30,27 @@
 export default {
     name: 'BSwitch',
     props: {
-        value: [String, Number, Boolean, Function, Object, Array, Symbol],
-        nativeValue: [String, Number, Boolean, Function, Object, Array, Symbol],
+        value: [String, Number, Boolean, Function, Object, Array],
+        nativeValue: [String, Number, Boolean, Function, Object, Array],
         disabled: Boolean,
         type: String,
         name: String,
         required: Boolean,
         size: String,
         trueValue: {
-            type: [String, Number, Boolean, Function, Object, Array, Symbol],
+            type: [String, Number, Boolean, Function, Object, Array],
             default: true
         },
         falseValue: {
-            type: [String, Number, Boolean, Function, Object, Array, Symbol],
+            type: [String, Number, Boolean, Function, Object, Array],
+            default: false
+        },
+        rounded: {
+            type: Boolean,
+            default: true
+        },
+        outlined: {
+            type: Boolean,
             default: false
         }
     },
@@ -59,6 +69,14 @@ export default {
                 this.newValue = value
                 this.$emit('input', value)
             }
+        },
+        newClass() {
+            return [
+                this.size,
+                { 'is-disabled': this.disabled },
+                { 'is-rounded': this.rounded },
+                { 'is-outlined': this.outlined }
+            ]
         }
     },
     watch: {
@@ -68,6 +86,12 @@ export default {
         value(value) {
             this.newValue = value
         }
+    },
+    methods: {
+        focus() {
+            // MacOS FireFox and Safari do not focus when clicked
+            this.$refs.input.focus()
+        }
     }
 }
 </script>

package/src/components/switch/__snapshots__/Switch.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BSwitch render correctly 1`] = `<label class="switch is-rounded"><input type="checkbox" true-value="true" value="false"> <span class="check"></span> <span class="control-label"></span></label>`;