buefy 0.7.9 → 0.8.2

package/src/components/datepicker/DatepickerTableRow.vue

@@ -1,5 +1,8 @@
 <template>
     <div class="datepicker-row">
+        <a class="datepicker-cell is-week-number" v-if="showWeekNumber">
+            {{ getWeekNumber(week[6]) }}
+        </a>
         <template v-for="(day, index) in week">
             <a
                 v-if="selectableDate(day) && !disabled"
@@ -11,7 +14,8 @@
                 :disabled="disabled"
                 @click.prevent="emitChosenDate(day)"
                 @keydown.enter.prevent="emitChosenDate(day)"
-                @keydown.space.prevent="emitChosenDate(day)">
+                @keydown.space.prevent="emitChosenDate(day)"
+                @mouseenter="setRangeHoverEndDate(day)">
                 {{ day.getDate() }}
                 <div class="events" v-if="eventsDateMatch(day)">
                     <div
@@ -36,7 +40,10 @@
 export default {
     name: 'BDatepickerTableRow',
     props: {
-        selectedDate: Date,
+        selectedDate: {
+            type: [Date, Array]
+        },
+        hoveredDateRange: Array,
         week: {
             type: Array,
             required: true
@@ -55,9 +62,62 @@ export default {
         indicators: String,
         dateCreator: Function,
         nearbyMonthDays: Boolean,
-        nearbySelectableMonthDays: Boolean
+        nearbySelectableMonthDays: Boolean,
+        showWeekNumber: {
+            type: Boolean,
+            default: () => false
+        },
+        rulesForFirstWeek: {
+            type: Number,
+            default: () => 4
+        },
+        firstDayOfWeek: Number
     },
     methods: {
+        firstWeekOffset(year, dow, doy) {
+            // first-week day -- which january is always in the first week (4 for iso, 1 for other)
+            var fwd = 7 + dow - doy
+            // first-week day local weekday -- which local weekday is fwd
+            var firstJanuary = new Date(year, 0, fwd)
+            var fwdlw = (7 + firstJanuary.getDay() - dow) % 7
+            return -fwdlw + fwd - 1
+        },
+        daysInYear(year) {
+            return this.isLeapYear(year) ? 366 : 365
+        },
+        isLeapYear(year) {
+            return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+        },
+        getSetDayOfYear(input) {
+            var dayOfYear = Math.round((input - new Date(input.getFullYear(), 0, 1)) / 864e5) + 1
+            return dayOfYear
+        },
+        weeksInYear(year, dow, doy) {
+            var weekOffset = this.firstWeekOffset(year, dow, doy)
+            var weekOffsetNext = this.firstWeekOffset(year + 1, dow, doy)
+            return (this.daysInYear(year) - weekOffset + weekOffsetNext) / 7
+        },
+        getWeekNumber(mom) {
+            var dow = this.firstDayOfWeek // first day of week
+            // Rules for the first week : 1 for the 1st January, 4 for the 4th January
+            var doy = this.rulesForFirstWeek
+            var weekOffset = this.firstWeekOffset(mom.getFullYear(), dow, doy)
+            var week = Math.floor((this.getSetDayOfYear(mom) - weekOffset - 1) / 7) + 1
+            var resWeek
+            var resYear
+            if (week < 1) {
+                resYear = mom.getFullYear() - 1
+                resWeek = week + this.weeksInYear(resYear, dow, doy)
+            } else if (week > this.weeksInYear(mom.getFullYear(), dow, doy)) {
+                resWeek = week - this.weeksInYear(mom.getFullYear(), dow, doy)
+                resYear = mom.getFullYear() + 1
+            } else {
+                resYear = mom.getFullYear()
+                resWeek = week
+            }
+
+            return resWeek
+        },
         /*
         * Check that selected day is within earliest/latest params and
         * is within this month
@@ -150,19 +210,58 @@ export default {
                     return false
                 }
 
+                if (Array.isArray(dateTwo)) {
+                    return dateTwo.some((date) => (
+                        dateOne.getDate() === date.getDate() &&
+                        dateOne.getFullYear() === date.getFullYear() &&
+                        dateOne.getMonth() === date.getMonth()
+                    ))
+                }
                 return (dateOne.getDate() === dateTwo.getDate() &&
                     dateOne.getFullYear() === dateTwo.getFullYear() &&
                     dateOne.getMonth() === dateTwo.getMonth())
             }
 
+            function dateWithin(dateOne, dates) {
+                if (!Array.isArray(dates)) { return false }
+
+                return dateOne > dates[0] && dateOne < dates[1]
+            }
+
             return {
-                'is-selected': dateMatch(day, this.selectedDate),
+                'is-selected': dateMatch(day, this.selectedDate) || dateWithin(day, this.selectedDate),
+                'is-first-selected':
+                    dateMatch(day, Array.isArray(this.selectedDate) && this.selectedDate[0]),
+                'is-within-selected':
+                    dateWithin(day, this.selectedDate),
+                'is-last-selected':
+                    dateMatch(day, Array.isArray(this.selectedDate) && this.selectedDate[1]),
+                'is-within-hovered-range':
+                    this.hoveredDateRange && this.hoveredDateRange.length === 2 &&
+                    (dateMatch(day, this.hoveredDateRange) ||
+                        dateWithin(day, this.hoveredDateRange)),
+                'is-first-hovered': dateMatch(
+                    day,
+                    Array.isArray(this.hoveredDateRange) && this.hoveredDateRange[0]
+                ),
+                'is-within-hovered':
+                    dateWithin(day, this.hoveredDateRange),
+                'is-last-hovered': dateMatch(
+                    day,
+                    Array.isArray(this.hoveredDateRange) && this.hoveredDateRange[1]
+                ),
                 'is-today': dateMatch(day, this.dateCreator()),
                 'is-selectable': this.selectableDate(day) && !this.disabled,
                 'is-unselectable': !this.selectableDate(day) || this.disabled,
                 'is-invisible': !this.nearbyMonthDays && day.getMonth() !== this.month,
                 'is-nearby': this.nearbySelectableMonthDays && day.getMonth() !== this.month
             }
+        },
+        setRangeHoverEndDate(day) {
+            const isRangeInput = Array.isArray(this.selectedDate)
+            if (isRangeInput) {
+                this.$emit('rangeHoverEndDate', day)
+            }
         }
     }
 }

package/src/components/dialog/Dialog.vue

@@ -180,9 +180,11 @@ export default {
     },
     beforeMount() {
         // Insert the Dialog component in body tag
-        this.$nextTick(() => {
-            document.body.appendChild(this.$el)
-        })
+        if (typeof window !== 'undefined') {
+            this.$nextTick(() => {
+                document.body.appendChild(this.$el)
+            })
+        }
     },
     mounted() {
         this.isActive = true

package/src/components/dialog/index.js

@@ -41,7 +41,7 @@ const DialogProgrammatic = {
 const Plugin = {
     install(Vue) {
         registerComponent(Vue, Dialog)
-        registerComponentProgrammatic(Vue, '$dialog', DialogProgrammatic)
+        registerComponentProgrammatic(Vue, 'dialog', DialogProgrammatic)
     }
 }
 
@@ -50,5 +50,5 @@ use(Plugin)
 export default Plugin
 
 export {
-    DialogProgrammatic as Dialog
+    DialogProgrammatic
 }

package/src/components/dropdown/Dropdown.vue

@@ -41,7 +41,7 @@ export default {
     name: 'BDropdown',
     props: {
         value: {
-            type: [String, Number, Boolean, Object, Array, Symbol, Function],
+            type: [String, Number, Boolean, Object, Array, Function],
             default: null
         },
         disabled: Boolean,
@@ -146,8 +146,6 @@ export default {
             this.$emit('input', this.selected)
             if (!this.multiple) {
                 this.isActive = !this.closeOnClick
-                /*
-                * breaking change
                 if (this.hoverable && this.closeOnClick) {
                     this.isHoverable = false
                     // Timeout for the animation complete before destroying
@@ -155,7 +153,6 @@ export default {
                         this.isHoverable = true
                     }, 250)
                 }
-               */
             }
         },
 

package/src/components/dropdown/DropdownItem.vue

@@ -6,7 +6,7 @@
         :class="anchorClasses"
         @click="selectItem"
         :role="ariaRoleItem"
-        tabindex="0">
+        :tabindex="focusable ? 0 : null">
         <slot/>
     </a>
     <div
@@ -14,7 +14,7 @@
         :class="itemClasses"
         @click="selectItem"
         :role="ariaRoleItem"
-        tabindex="0">
+        :tabindex="focusable ? 0 : null">
         <slot/>
     </div>
 </template>
@@ -24,12 +24,16 @@ export default {
     name: 'BDropdownItem',
     props: {
         value: {
-            type: [String, Number, Boolean, Object, Array, Symbol, Function],
+            type: [String, Number, Boolean, Object, Array, Function],
             default: null
         },
         separator: Boolean,
         disabled: Boolean,
         custom: Boolean,
+        focusable: {
+            type: Boolean,
+            default: true
+        },
         paddingless: Boolean,
         hasLink: Boolean,
         ariaRole: {

package/src/components/field/Field.spec.js

@@ -25,6 +25,16 @@ describe('BField', () => {
         expect(wrapper.vm._data).toEqual(expect.objectContaining({fieldLabelSize: 'is-normal'}))
     })
 
+    it('sets input class with type value when prop "type" is changed dynamically', () => {
+        const type = 'is-danger'
+        const wrapper = mount(BField, {
+            localVue,
+            slots: { default: [BInput] }
+        })
+        wrapper.setProps({ type })
+        expect(wrapper.find('.input').classes()).toContain(type)
+    })
+
     describe('class names for the root div.field', () => {
         it('contains "is-expanded" when prop "expanded" is set', () => {
             const wrapper = shallowMount(BField, { propsData: { expanded: true } })
@@ -55,6 +65,14 @@ describe('BField', () => {
             expect(wrapper.find('.field').find('p.help').text()).toEqual(message)
         })
 
+        it('changes the <p> element content in the root div.field when "message" prop is changed dynamically', () => {
+            const message = 'Some string message'
+            const mountOptions = generateMountOptions({ message: 'initial message' })
+            const wrapper = shallowMount(BField, mountOptions)
+            wrapper.setProps({ message })
+            expect(wrapper.find('.field').find('p.help').text()).toEqual(message)
+        })
+
         it('given an array of string as message, it joins the messages with line breaks', () => {
             const message = [
                 'Some string message 1',

package/src/components/field/Field.vue

@@ -88,7 +88,8 @@ export default {
                     this.labelPosition === 'inside',
                 'is-floating-label': this.hasLabel && !this.horizontal &&
                     this.labelPosition === 'on-border'
-            }]
+            },
+            this.numberInputClasses]
         },
         /**
         * Correct Bulma class for the side of the addon or group.
@@ -142,6 +143,24 @@ export default {
         },
         hasLabel() {
             return this.label || this.$slots.label
+        },
+        numberInputClasses() {
+            if (this.$slots.default) {
+                const numberinput = this.$slots.default.filter((node) => node.tag && node.tag.toLowerCase().indexOf('numberinput') >= 0)[0]
+                if (numberinput) {
+                    const classes = ['has-numberinput']
+                    const controlsPosition = numberinput.componentOptions.propsData.controlsPosition
+                    const size = numberinput.componentOptions.propsData.size
+                    if (controlsPosition) {
+                        classes.push(`has-numberinput-${controlsPosition}`)
+                    }
+                    if (size) {
+                        classes.push(`has-numberinput-${size}`)
+                    }
+                    return classes
+                }
+            }
+            return null
         }
     },
     watch: {
@@ -185,7 +204,7 @@ export default {
     mounted() {
         if (this.horizontal) {
             // Bulma docs: .is-normal for any .input or .button
-            const elements = this.$el.querySelectorAll('.input, .select, .button, .textarea')
+            const elements = this.$el.querySelectorAll('.input, .select, .button, .textarea, .b-slider')
             if (elements.length > 0) {
                 this.fieldLabelSize = 'is-normal'
             }

package/src/components/index.js

@@ -14,10 +14,13 @@ import Menu from './menu'
 import Message from './message'
 import Modal from './modal'
 import Notification from './notification'
+import Navbar from './navbar'
 import Numberinput from './numberinput'
 import Pagination from './pagination'
+import Progress from './progress'
 import Radio from './radio'
 import Select from './select'
+import Slider from './slider'
 import Snackbar from './snackbar'
 import Steps from './steps'
 import Switch from './switch'
@@ -46,11 +49,14 @@ export {
     Menu,
     Message,
     Modal,
+    Navbar,
     Notification,
     Numberinput,
     Pagination,
+    Progress,
     Radio,
     Select,
+    Slider,
     Snackbar,
     Steps,
     Switch,

package/src/components/input/Input.vue

@@ -34,7 +34,7 @@
             :size="iconSize"/>
 
         <b-icon
-            v-if="!loading && (passwordReveal || statusType)"
+            v-if="!loading && (passwordReveal || statusTypeIcon)"
             class="is-right"
             :class="{ 'is-clickable': passwordReveal }"
             :icon="passwordReveal ? passwordVisibleIcon : statusTypeIcon"
@@ -122,7 +122,7 @@ export default {
             ]
         },
         hasIconRight() {
-            return this.passwordReveal || this.loading || this.statusType
+            return this.passwordReveal || this.loading || this.statusTypeIcon
         },
 
         /**

package/src/components/loading/index.js

@@ -22,7 +22,7 @@ const LoadingProgrammatic = {
 const Plugin = {
     install(Vue) {
         registerComponent(Vue, Loading)
-        registerComponentProgrammatic(Vue, '$loading', LoadingProgrammatic)
+        registerComponentProgrammatic(Vue, 'loading', LoadingProgrammatic)
     }
 }
 

package/src/components/modal/index.js

@@ -32,7 +32,7 @@ const ModalProgrammatic = {
 const Plugin = {
     install(Vue) {
         registerComponent(Vue, Modal)
-        registerComponentProgrammatic(Vue, '$modal', ModalProgrammatic)
+        registerComponentProgrammatic(Vue, 'modal', ModalProgrammatic)
     }
 }
 

package/src/components/navbar/NavBar.spec.js

@@ -0,0 +1,76 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import BNavbar from '@components/navbar/Navbar.vue'
+import BNavbarBurger from '@components/navbar/NavbarBurger.vue'
+import BNavbarItem from '@components/navbar/NavbarItem.vue'
+
+describe('BNavbar', () => {
+    let wrapper
+    beforeEach(() => {
+        wrapper = mount(BNavbar)
+    })
+
+    it('is called', () => {
+        expect(wrapper.isVueInstance()).toBeTruthy()
+    })
+
+    it('should have a nav tag', () => {
+        expect(wrapper.contains('nav')).toBeTruthy()
+    })
+
+    it('should emmit the sync event when the burger menu was clicked', () => {
+        const anchorTag = wrapper.find('.navbar-burger')
+        anchorTag.trigger('click')
+        const valueEmitted = wrapper.emitted()['update:isActive'][0]
+        expect(valueEmitted).toContainEqual(true)
+        expect(wrapper.vm.isOpened).toBe(true)
+    })
+
+    it('should have the is-active class when we set the isActive prop manually', () => {
+        const navBar = mount(BNavbar)
+        navBar.setProps({ isActive: true })
+        const menuContainer = navBar.find('.navbar-menu')
+        expect(menuContainer.classes('is-active')).toBe(true)
+    })
+
+    describe('BNavbarBurger', () => {
+        let wrapper
+        beforeEach(() => {
+            wrapper = shallowMount(BNavbarBurger)
+        })
+
+        it('is called', () => {
+            expect(wrapper.isVueInstance()).toBeTruthy()
+        })
+
+        it('should be an anchor tag', () => {
+            const anchorTag = wrapper.find('.navbar-burger')
+            expect(anchorTag.is('a')).toBe(true)
+        })
+
+        it('should have the is-active class when the prop isOpened is true', () => {
+            const burgerWrapper = mount(BNavbarBurger)
+            burgerWrapper.setProps({ isOpened: true })
+            expect(burgerWrapper.classes('is-active')).toBe(true)
+        })
+    })
+
+    describe('BNavbarItem', () => {
+        it('is called', () => {
+            expect(wrapper.isVueInstance()).toBeTruthy()
+        })
+
+        it('correctly renders the provided tag', () => {
+            const tag = 'div'
+            const NavbarItem = {
+                components: { BNavbarItem },
+                template: `
+                  <div>
+                    <b-navbar-item tag="${tag}"></b-navbar-item>
+                  </div>
+                `
+            }
+            const wrapper = mount(NavbarItem)
+            expect(wrapper.contains(tag)).toBeTruthy()
+        })
+    })
+})

package/src/components/navbar/Navbar.vue

@@ -0,0 +1,127 @@
+<template>
+    <nav
+        class="navbar"
+        role="navigation"
+        aria-label="main navigation"
+        :class="computedClasses"
+    >
+        <div class="navbar-brand">
+            <slot name="brand"/>
+            <slot name="burger" v-bind="{ isOpened, toggleActive }">
+                <navbar-burger @click.native="toggleActive" :is-opened="isOpened"/>
+            </slot>
+        </div>
+        <div class="navbar-menu" :class="{ 'is-active': isOpened }">
+            <div class="navbar-start">
+                <slot name="start" />
+            </div>
+            <div class="navbar-end">
+                <slot name="end" />
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script>
+import NavbarBurger from './NavbarBurger.vue'
+
+const FIXED_TOP_CLASS = 'is-fixed-top'
+const FIXED_BOTTOM_CLASS = 'is-fixed-bottom'
+
+export default {
+    name: 'BNavbar',
+    components: {
+        NavbarBurger
+    },
+    props: {
+        type: [String, Object],
+        transparent: {
+            type: Boolean,
+            default: false
+        },
+        fixedTop: {
+            type: Boolean,
+            default: false
+        },
+        fixedBottom: {
+            type: Boolean,
+            default: false
+        },
+        isActive: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            internalIsActive: this.isActive
+        }
+    },
+    computed: {
+        isOpened() {
+            return this.internalIsActive
+        },
+        computedClasses() {
+            return [
+                this.type,
+                { [FIXED_TOP_CLASS]: this.fixedTop },
+                { [FIXED_BOTTOM_CLASS]: this.fixedBottom }
+            ]
+        }
+    },
+    watch: {
+        isActive: {
+            handler(isActive) {
+                this.internalIsActive = isActive
+            },
+            immediate: true
+        },
+        fixedTop: {
+            handler(isSet) {
+                this.checkIfFixedPropertiesAreColliding()
+                if (isSet) {
+                    return this.setBodyClass(FIXED_TOP_CLASS)
+                }
+                this.removeBodyClass(FIXED_TOP_CLASS)
+            },
+            immediate: true
+        },
+        fixedBottom: {
+            handler(isSet) {
+                this.checkIfFixedPropertiesAreColliding()
+                if (isSet) {
+                    return this.setBodyClass(FIXED_BOTTOM_CLASS)
+                }
+                this.removeBodyClass(FIXED_BOTTOM_CLASS)
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        toggleActive() {
+            this.internalIsActive = !this.internalIsActive
+            this.$emit('update:isActive', this.internalIsActive)
+        },
+        setBodyClass(className) {
+            if (typeof window !== 'undefined') {
+                document.body.classList.add(className)
+            }
+        },
+        removeBodyClass(className) {
+            if (typeof window !== 'undefined') {
+                document.body.classList.remove(className)
+            }
+        },
+        checkIfFixedPropertiesAreColliding() {
+            const areColliding = this.fixedTop && this.fixedBottom
+            if (areColliding) {
+                throw new Error('You should choose if the BNavbar is fixed bottom or fixed top, but not both')
+            }
+        }
+    },
+    beforeDestroy() {
+        this.removeBodyClass(FIXED_BOTTOM_CLASS)
+        this.removeBodyClass(FIXED_TOP_CLASS)
+    }
+}
+</script>

package/src/components/navbar/NavbarBurger.vue

@@ -0,0 +1,25 @@
+<template>
+    <a
+        role="button"
+        class="navbar-burger burger"
+        :class="{ 'is-active': isOpened }"
+        aria-label="menu"
+        :aria-expanded="isOpened"
+    >
+        <span aria-hidden="true"/>
+        <span aria-hidden="true"/>
+        <span aria-hidden="true"/>
+    </a>
+</template>
+
+<script>
+export default {
+    name: 'NavbarBurger',
+    props: {
+        isOpened: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/navbar/NavbarItem.vue

@@ -0,0 +1,21 @@
+<template>
+    <component
+        :is="tag"
+        class="navbar-item"
+        v-bind="$attrs"
+    >
+        <slot/>
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'BNavbarItem',
+    props: {
+        tag: {
+            type: String,
+            default: 'a'
+        }
+    }
+}
+</script>

package/src/components/navbar/index.js

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

package/src/components/notification/index.js

@@ -34,7 +34,7 @@ const NotificationProgrammatic = {
 const Plugin = {
     install(Vue) {
         registerComponent(Vue, Notification)
-        registerComponentProgrammatic(Vue, '$notification', NotificationProgrammatic)
+        registerComponentProgrammatic(Vue, 'notification', NotificationProgrammatic)
     }
 }