buefy 0.7.9 → 0.8.2

package/src/components/pagination/Pagination.vue

@@ -96,6 +96,14 @@ export default {
             type: [Number, String],
             default: 1
         },
+        rangeBefore: {
+            type: [Number, String],
+            default: 1
+        },
+        rangeAfter: {
+            type: [Number, String],
+            default: 1
+        },
         size: String,
         simple: Boolean,
         rounded: Boolean,
@@ -118,6 +126,14 @@ export default {
             ]
         },
 
+        beforeCurrent() {
+            return parseInt(this.rangeBefore)
+        },
+
+        afterCurrent() {
+            return parseInt(this.rangeAfter)
+        },
+
         /**
         * Total page size (count).
         */
@@ -144,28 +160,28 @@ export default {
         * Check if first page button should be visible.
         */
         hasFirst() {
-            return this.current >= 3
+            return this.current >= (2 + this.beforeCurrent)
         },
 
         /**
         * Check if first ellipsis should be visible.
         */
         hasFirstEllipsis() {
-            return this.current >= 4
+            return this.current >= (this.beforeCurrent + 4)
         },
 
         /**
         * Check if last page button should be visible.
         */
         hasLast() {
-            return this.current <= this.pageCount - 2
+            return this.current <= this.pageCount - (1 + this.afterCurrent)
         },
 
         /**
         * Check if last ellipsis should be visible.
         */
         hasLastEllipsis() {
-            return this.current < this.pageCount - 2 && this.current <= this.pageCount - 3
+            return this.current < this.pageCount - (2 + this.afterCurrent)
         },
 
         /**
@@ -182,8 +198,14 @@ export default {
         pagesInRange() {
             if (this.simple) return
 
-            const left = Math.max(1, this.current - 1)
-            const right = Math.min(this.current + 1, this.pageCount)
+            let left = Math.max(1, this.current - this.beforeCurrent)
+            if (left - 1 === 2) {
+                left-- // Do not show the ellipsis if there is only one to hide
+            }
+            let right = Math.min(this.current + this.afterCurrent, this.pageCount)
+            if (this.pageCount - right === 2) {
+                right++ // Do not show the ellipsis if there is only one to hide
+            }
 
             const pages = []
             for (let i = left; i <= right; i++) {

package/src/components/progress/Progress.spec.js

@@ -0,0 +1,77 @@
+import { shallowMount } from '@vue/test-utils'
+import BProgress from '@components/progress/Progress'
+
+describe('BProgress', () => {
+    it('is called', () => {
+        const wrapper = shallowMount(BProgress)
+        expect(wrapper.name()).toBe('BProgress')
+        expect(wrapper.isVueInstance()).toBeTruthy()
+    })
+
+    it('render correctly', () => {
+        const wrapper = shallowMount(BProgress)
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('add value attribute when a value is passed', () => {
+        const value = 50
+        const wrapper = shallowMount(BProgress)
+        wrapper.setProps({ value })
+
+        expect(wrapper.find('.progress').attributes().value).toEqual(`${value}`)
+    })
+
+    describe('Passing a value prop', () => {
+        it('add value attribute to the <progress> element', () => {
+            const value = 50
+            const wrapper = shallowMount(BProgress, {
+                propsData: {value}
+            })
+            expect(wrapper.find('.progress').attributes().value).toEqual(`${value}`)
+        })
+
+        describe('Passing true to show-value prop', () => {
+            it('adds a help <p> element in the root div.progress-wrapper when "show-value" prop is true', () => {
+                const value = 50
+                const wrapper = shallowMount(BProgress, {
+                    propsData: {
+                        value,
+                        showValue: true
+                    }
+                })
+                expect(wrapper.find('.progress-wrapper').find('p.progress-value').text()).toEqual(`${value}`)
+            })
+
+            it('display the value as percent when passing "percent" for the format prop', () => {
+                const value = 50
+                const max = 100
+                const format = 'percent'
+                const wrapper = shallowMount(BProgress, {
+                    propsData: {
+                        value,
+                        max,
+                        format,
+                        showValue: true
+                    }
+                })
+
+                expect(wrapper.find('.progress').text()).toEqual(`${value * max / 100}%`)
+            })
+
+            it('display the trailing zeroes when setting the keepTrailingZeroes prop', () => {
+                const value = 50
+                const keepTrailingZeroes = true
+                const wrapper = shallowMount(BProgress, {
+                    propsData: {
+                        value,
+                        keepTrailingZeroes,
+                        showValue: true
+                    }
+                })
+
+                expect(wrapper.find('.progress').text()).toEqual(`${value}.00`)
+            })
+        })
+    })
+})

package/src/components/progress/Progress.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="progress-wrapper">
+        <progress
+            ref="progress"
+            class="progress"
+            :class="newType"
+            :max="max">{{ newValue }}</progress>
+        <p
+            v-if="showValue"
+            class="progress-value has-text-white"><slot>{{ newValue }}</slot></p>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'BProgress',
+    props: {
+        type: {
+            type: [String, Object],
+            default: 'is-darkgrey'
+        },
+        size: String,
+        value: {
+            type: Number,
+            default: undefined
+        },
+        max: {
+            type: Number,
+            default: 100
+        },
+        showValue: {
+            type: Boolean,
+            default: false
+        },
+        format: {
+            type: String,
+            default: 'raw',
+            validator: (value) => {
+                return [
+                    'raw',
+                    'percent'
+                ].indexOf(value) >= 0
+            }
+        },
+        precision: {
+            type: Number,
+            default: 2
+        },
+        keepTrailingZeroes: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        isIndeterminate() {
+            return this.value === undefined || this.value === null
+        },
+        newType() {
+            return [
+                this.size,
+                this.type
+            ]
+        },
+        newValue() {
+            if (this.value === undefined || this.value === null || isNaN(this.value)) {
+                return undefined
+            }
+
+            if (this.format === 'percent') {
+                const val = this.toFixed(this.value * this.max / 100)
+                return `${val}%`
+            }
+            const val = this.toFixed(this.value)
+            return val
+        }
+    },
+    watch: {
+        value(value) {
+            this.setValue(value)
+        }
+    },
+    methods: {
+        /**
+        * When value is changed back to undefined, value of native progress get reset to 0.
+        * Need to add and remove the value attribute to have the indeterminate or not.
+        */
+        setValue(value) {
+            if (this.isIndeterminate) {
+                this.$refs.progress.removeAttribute('value')
+            } else {
+                this.$refs.progress.setAttribute('value', value)
+            }
+        },
+        // Custom function that imitate the javascript toFixed method with improved rounding
+        toFixed(num) {
+            let fixed = (+(`${Math.round(+(`${num}e${this.precision}`))}e${-this.precision}`)).toFixed(this.precision)
+            if (!this.keepTrailingZeroes) {
+                fixed = fixed.replace(/\.?0+$/, '')
+            }
+            return fixed
+        }
+    },
+    mounted() {
+        this.setValue(this.value)
+    }
+}
+</script>

package/src/components/progress/__snapshots__/Progress.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BProgress render correctly 1`] = `
+<div class="progress-wrapper"><progress max="100" class="progress is-darkgrey"></progress>
+    <!---->
+</div>
+`;

package/src/components/progress/index.js

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

package/src/components/radio/Radio.spec.js

@@ -1,10 +1,27 @@
 import { shallowMount } from '@vue/test-utils'
 import BRadio from '@components/radio/Radio'
 
+let wrapper
+
 describe('BRadio', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BRadio)
+    })
+
     it('is called', () => {
-        const wrapper = shallowMount(BRadio)
         expect(wrapper.name()).toBe('BRadio')
         expect(wrapper.isVueInstance()).toBeTruthy()
     })
+
+    it('has an input radio', () => {
+        expect(wrapper.contains('label input[type=radio]')).toBeTruthy()
+    })
+
+    it('emit input event with value when value change', () => {
+        wrapper.setProps({ value: true })
+        expect(wrapper.vm.computedValue).toBeTruthy()
+        wrapper.vm.computedValue = false
+        const valueEmitted = wrapper.emitted()['input'][0]
+        expect(valueEmitted).toContainEqual(false)
+    })
 })

package/src/components/radio/Radio.vue

@@ -4,12 +4,12 @@
         ref="label"
         :class="[size, { 'is-disabled': disabled }]"
         :disabled="disabled"
-        :tabindex="disabled ? false : 0"
-        @keydown.prevent.enter.space="$refs.label.click()">
+        @click="focus"
+        @keydown.prevent.enter="$refs.label.click()">
         <input
             v-model="computedValue"
-            tabindex="-1"
             type="radio"
+            ref="input"
             @click.stop
             :disabled="disabled"
             :required="required"
@@ -24,8 +24,8 @@
 export default {
     name: 'BRadio',
     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],
         type: String,
         disabled: Boolean,
         required: Boolean,
@@ -55,6 +55,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/radio/RadioButton.spec.js

@@ -1,10 +1,27 @@
 import { shallowMount } from '@vue/test-utils'
 import BRadioButton from '@components/radio/RadioButton'
 
+let wrapper
+
 describe('BRadioButton', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BRadioButton)
+    })
+
     it('is called', () => {
-        const wrapper = shallowMount(BRadioButton)
         expect(wrapper.name()).toBe('BRadioButton')
         expect(wrapper.isVueInstance()).toBeTruthy()
     })
+
+    it('has an input radio', () => {
+        expect(wrapper.contains('label input[type=radio]')).toBeTruthy()
+    })
+
+    it('emit input event with value when value change', () => {
+        wrapper.setProps({ value: true })
+        expect(wrapper.vm.computedValue).toBeTruthy()
+        wrapper.vm.computedValue = false
+        const valueEmitted = wrapper.emitted()['input'][0]
+        expect(valueEmitted).toContainEqual(false)
+    })
 })

package/src/components/radio/RadioButton.vue

@@ -3,20 +3,25 @@
         <label
             class="b-radio radio button"
             ref="label"
-            :class="[newValue === nativeValue ? type : null, size]"
+            :class="[newValue === nativeValue ? type : null, size, {
+                'is-disabled': disabled,
+                'is-focused': isFocused
+            }]"
             :disabled="disabled"
-            :tabindex="disabled ? false : 0"
-            @keydown.prevent.enter.space="$refs.label.click()">
+            @click="focus"
+            @keydown.prevent.enter="$refs.label.click()">
             <slot/>
             <input
                 v-model="computedValue"
-                tabindex="-1"
                 type="radio"
+                ref="input"
                 @click.stop
                 :disabled="disabled"
                 :required="required"
                 :name="name"
-                :value="nativeValue">
+                :value="nativeValue"
+                @focus="isFocused = true"
+                @blur="isFocused = false">
         </label>
     </div>
 </template>
@@ -25,8 +30,8 @@
 export default {
     name: 'BRadioButton',
     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],
         type: {
             type: String,
             default: 'is-primary'
@@ -38,7 +43,8 @@ export default {
     },
     data() {
         return {
-            newValue: this.value
+            newValue: this.value,
+            isFocused: false
         }
     },
     computed: {
@@ -59,6 +65,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/select/Select.spec.js

@@ -1,10 +1,31 @@
 import { shallowMount } from '@vue/test-utils'
 import BSelect from '@components/select/Select'
 
+let wrapper
+
 describe('BSelect', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BSelect)
+    })
+
     it('is called', () => {
-        const wrapper = shallowMount(BSelect)
         expect(wrapper.name()).toBe('BSelect')
         expect(wrapper.isVueInstance()).toBeTruthy()
     })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('has a select element', () => {
+        expect(wrapper.contains('select')).toBeTruthy()
+    })
+
+    it('emit input event with value when value change', () => {
+        wrapper.setProps({ value: true })
+        expect(wrapper.vm.computedValue).toBeTruthy()
+        wrapper.vm.computedValue = false
+        const valueEmitted = wrapper.emitted()['input'][0]
+        expect(valueEmitted).toContainEqual(false)
+    })
 })

package/src/components/select/Select.vue

@@ -22,6 +22,7 @@
                         {{ placeholder }}
                     </option>
                 </template>
+
                 <slot/>
 
             </select>
@@ -49,7 +50,7 @@ export default {
     inheritAttrs: false,
     props: {
         value: {
-            type: [String, Number, Boolean, Object, Array, Symbol, Function],
+            type: [String, Number, Boolean, Object, Array, Function],
             default: null
         },
         placeholder: String,

package/src/components/select/__snapshots__/Select.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BSelect render correctly 1`] = `
+<div class="control"><span class="select is-empty"><select><!----> </select></span>
+    <!---->
+</div>
+`;

package/src/components/slider/Slider.spec.js

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils'
+import BSlider from '@components/slider/Slider'
+
+describe('BSlider', () => {
+    it('is called', () => {
+        const wrapper = mount(BSlider)
+        expect(wrapper.name()).toBe('BSlider')
+        expect(wrapper.isVueInstance()).toBeTruthy()
+    })
+})