buefy 0.9.9 → 0.9.13

package/src/components/image/Image.spec.js

@@ -1,183 +1,197 @@
-import { shallowMount } from '@vue/test-utils'
-import BImage from '@components/image/Image'
-
-describe('BImage', () => {
-    const originalClientWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth')
-    const clientWidth = 500
-    beforeEach(() => {
-        Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: clientWidth })
-    })
-    afterAll(() => {
-        Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth)
-    })
-
-    it('is called', () => {
-        const wrapper = shallowMount(BImage)
-        expect(wrapper.name()).toBe('BImage')
-        expect(wrapper.isVueInstance()).toBeTruthy()
-    })
-
-    it('render correctly', () => {
-        const wrapper = shallowMount(BImage)
-
-        expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('render placeholder correctly', () => {
-        const baseName = 'my-image-source'
-        const alt = 'Alt text'
-        const placeholder = `${baseName}.png`
-        const src = `${baseName}.webp`
-        const wrapper = shallowMount(BImage, {
-            propsData: {
-                alt,
-                placeholder,
-                src
-            }
-        })
-
-        expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('compute the image src as expected', () => {
-        const baseName = 'my-image-source'
-        const src = `${baseName}.webp`
-        const wrapper = shallowMount(BImage, {
-            propsData: {
-                src
-            }
-        })
-        const vm = wrapper.vm
-
-        expect(vm.computedSrc).toBe(src)
-
-        let webpFallback = '.jpg'
-        wrapper.setProps({
-            webpFallback
-        })
-        expect(vm.computedSrc).toBe(`${baseName}${webpFallback}`)
-
-        webpFallback = 'a-complete-image-source.png'
-        wrapper.setProps({
-            webpFallback
-        })
-        expect(vm.computedSrc).toBe(webpFallback)
-    })
-
-    it('compute the placeholder src as expected', () => {
-        const baseName = 'my-image-source'
-        const placeholder = `${baseName}.webp`
-        const wrapper = shallowMount(BImage, {
-            propsData: {
-                placeholder
-            }
-        })
-        const vm = wrapper.vm
-
-        expect(vm.computedPlaceholder).toBe(placeholder)
-
-        let webpFallback = '.jpg'
-        wrapper.setProps({
-            webpFallback
-        })
-        expect(vm.computedPlaceholder).toBe(`${baseName}${webpFallback}`)
-    })
-
-    it('compute the srcset as expected', () => {
-        const baseName = 'my-image-source'
-        const ext = '.webp'
-        const src = `${baseName}${ext}`
-        let srcset = `${src} 100w, ${src} 500w`
-        const wrapper = shallowMount(BImage, {
-            propsData: {
-                src,
-                srcset
-            }
-        })
-        const vm = wrapper.vm
-
-        expect(vm.computedSrcset).toBe(srcset)
-        expect(vm.computedSizes).toBe(`${clientWidth}px`)
-
-        let webpFallback = '.jpg'
-        srcset = `${baseName}${webpFallback} 100w, ${baseName}${webpFallback} 500w`
-        wrapper.setProps({
-            webpFallback
-        })
-        expect(vm.computedSrcset).toBe(srcset)
-
-        srcset = `${baseName}-200${webpFallback} 200w,${baseName}-500${webpFallback} 500w`
-        wrapper.setProps({
-            srcset: null,
-            srcsetSizes: [200, 500]
-        })
-        expect(vm.computedSrcset).toBe(srcset)
-
-        srcset = `${baseName}${webpFallback}?s=200 200w,${baseName}${webpFallback}?s=500 500w`
-        wrapper.setProps({
-            srcsetFormatter: (src, size) => `${src}?s=${size}`
-        })
-        expect(vm.computedSrcset).toBe(srcset)
-    })
-
-    it('manage ratio as expected', () => {
-        const src = `my-image-source.webp`
-        let ratio = null
-        const wrapper = shallowMount(BImage, {
-            propsData: {
-                src
-            }
-        })
-        const vm = wrapper.vm
-
-        expect(vm.imgClasses['has-ratio']).toBeFalsy()
-
-        ratio = '16by9'
-        wrapper.setProps({
-            ratio
-        })
-        expect(vm.imgClasses['has-ratio']).toBeTruthy()
-        expect(vm.figureClasses[`is-${ratio}`]).toBeTruthy()
-
-        ratio = '16by8'
-        wrapper.setProps({
-            ratio
-        })
-        expect(vm.imgClasses['has-ratio']).toBeTruthy()
-        expect(vm.figureStyles['paddingTop']).toBe(`${8 / 16 * 100}%`)
-    })
-
-    it('reset events before destroy', () => {
-        window.removeEventListener = jest.fn()
-
-        const wrapper = shallowMount(BImage)
-        wrapper.destroy()
-
-        expect(window.removeEventListener).toBeCalledWith('resize', expect.any(Function))
-    })
-
-    describe('has caption', () => {
-        it('as last element', () => {
-            const wrapper = shallowMount(BImage, {
-                slots: {
-                    caption: ['<div>This is a caption</div>']
-                }
-            })
-
-            expect(wrapper.html()).toMatchSnapshot()
-        })
-
-        it('as first element', () => {
-            const wrapper = shallowMount(BImage, {
-                slots: {
-                    caption: ['<div>This is a caption</div>']
-                },
-                propsData: {
-                    captionFirst: true
-                }
-            })
-
-            expect(wrapper.html()).toMatchSnapshot()
-        })
-    })
-})
+import { shallowMount } from '@vue/test-utils'
+import BImage from '@components/image/Image'
+
+describe('BImage', () => {
+    const originalClientWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth')
+    const clientWidth = 500
+    beforeEach(() => {
+        Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: clientWidth })
+    })
+    afterAll(() => {
+        Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth)
+    })
+
+    it('is called', () => {
+        const wrapper = shallowMount(BImage)
+        expect(wrapper.name()).toBe('BImage')
+        expect(wrapper.isVueInstance()).toBeTruthy()
+    })
+
+    it('render correctly', () => {
+        const wrapper = shallowMount(BImage)
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('render placeholder correctly', () => {
+        const baseName = 'my-image-source'
+        const alt = 'Alt text'
+        const placeholder = `${baseName}.png`
+        const src = `${baseName}.webp`
+        const wrapper = shallowMount(BImage, {
+            propsData: {
+                alt,
+                placeholder,
+                src
+            }
+        })
+
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('compute the image src as expected', () => {
+        const baseName = 'my-image-source'
+        const src = `${baseName}.webp`
+        const wrapper = shallowMount(BImage, {
+            propsData: {
+                src
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.computedSrc).toBe(src)
+
+        let webpFallback = '.jpg'
+        wrapper.setProps({
+            webpFallback
+        })
+        expect(vm.computedSrc).toBe(`${baseName}${webpFallback}`)
+
+        webpFallback = 'a-complete-image-source.png'
+        wrapper.setProps({
+            webpFallback
+        })
+        expect(vm.computedSrc).toBe(webpFallback)
+    })
+
+    it('compute the placeholder src as expected', () => {
+        const baseName = 'my-image-source'
+        const placeholder = `${baseName}.webp`
+        const wrapper = shallowMount(BImage, {
+            propsData: {
+                placeholder
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.computedPlaceholder).toBe(placeholder)
+
+        let webpFallback = '.jpg'
+        wrapper.setProps({
+            webpFallback
+        })
+        expect(vm.computedPlaceholder).toBe(`${baseName}${webpFallback}`)
+    })
+
+    it('compute the srcset as expected', () => {
+        const baseName = 'my-image-source'
+        const ext = '.webp'
+        const src = `${baseName}${ext}`
+        let srcset = `${src} 100w, ${src} 500w`
+        const wrapper = shallowMount(BImage, {
+            propsData: {
+                src,
+                srcset
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.computedSrcset).toBe(srcset)
+        expect(vm.computedSizes).toBe(`${clientWidth}px`)
+
+        let webpFallback = '.jpg'
+        srcset = `${baseName}${webpFallback} 100w, ${baseName}${webpFallback} 500w`
+        wrapper.setProps({
+            webpFallback
+        })
+        expect(vm.computedSrcset).toBe(srcset)
+
+        srcset = `${baseName}-200${webpFallback} 200w,${baseName}-500${webpFallback} 500w`
+        wrapper.setProps({
+            srcset: null,
+            srcsetSizes: [200, 500]
+        })
+        expect(vm.computedSrcset).toBe(srcset)
+
+        srcset = `${baseName}${webpFallback}?s=200 200w,${baseName}${webpFallback}?s=500 500w`
+        wrapper.setProps({
+            srcsetFormatter: (src, size) => `${src}?s=${size}`
+        })
+        expect(vm.computedSrcset).toBe(srcset)
+    })
+
+    it('manage ratio as expected', () => {
+        const src = `my-image-source.webp`
+        let ratio = null
+        const wrapper = shallowMount(BImage, {
+            propsData: {
+                src
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.imgClasses['has-ratio']).toBeFalsy()
+
+        ratio = '16by9'
+        wrapper.setProps({
+            ratio
+        })
+        expect(vm.imgClasses['has-ratio']).toBeTruthy()
+        expect(vm.figureClasses[`is-${ratio}`]).toBeTruthy()
+
+        ratio = '16by8'
+        wrapper.setProps({
+            ratio
+        })
+        expect(vm.imgClasses['has-ratio']).toBeTruthy()
+        expect(vm.figureStyles['paddingTop']).toBe(`${8 / 16 * 100}%`)
+    })
+
+    it('adds custom class to image as expected', () => {
+        const src = `my-image-source.webp`
+        let customClass = 'my-custom-class'
+        const wrapper = shallowMount(BImage, {
+            propsData: {
+                src,
+                customClass
+            }
+        })
+        const vm = wrapper.vm
+
+        expect(vm.imgClasses['my-custom-class']).toBeTruthy()
+    })
+
+    it('reset events before destroy', () => {
+        window.removeEventListener = jest.fn()
+
+        const wrapper = shallowMount(BImage)
+        wrapper.destroy()
+
+        expect(window.removeEventListener).toBeCalledWith('resize', expect.any(Function))
+    })
+
+    describe('has caption', () => {
+        it('as last element', () => {
+            const wrapper = shallowMount(BImage, {
+                slots: {
+                    caption: ['<div>This is a caption</div>']
+                }
+            })
+
+            expect(wrapper.html()).toMatchSnapshot()
+        })
+
+        it('as first element', () => {
+            const wrapper = shallowMount(BImage, {
+                slots: {
+                    caption: ['<div>This is a caption</div>']
+                },
+                propsData: {
+                    captionFirst: true
+                }
+            })
+
+            expect(wrapper.html()).toMatchSnapshot()
+        })
+    })
+})

package/src/components/image/Image.vue

@@ -94,7 +94,8 @@ export default {
         captionFirst: {
             type: Boolean,
             default: false
-        }
+        },
+        customClass: String
     },
     data() {
         return {
@@ -137,7 +138,8 @@ export default {
         imgClasses() {
             return {
                 'is-rounded': this.rounded,
-                'has-ratio': this.hasRatio
+                'has-ratio': this.hasRatio,
+                [this.customClass]: !!this.customClass
             }
         },
         srcExt() {

package/src/components/index.js

@@ -1,4 +1,5 @@
 import Autocomplete from './autocomplete'
+import Breadcrumb from './breadcrumb'
 import Button from './button'
 import Carousel from './carousel'
 import Checkbox from './checkbox'
@@ -41,6 +42,7 @@ import Upload from './upload'
 
 export {
     Autocomplete,
+    Breadcrumb,
     Button,
     Carousel,
     Checkbox,

package/src/components/loading/Loading.vue

@@ -3,7 +3,7 @@
         <div
             class="loading-overlay is-active"
             :class="{ 'is-full-page': displayInFullPage }"
-            v-if="isActive">
+            v-show="isActive">
             <div class="loading-background" @click="cancel"/>
             <slot>
                 <div class="loading-icon" />

package/src/components/loading/__snapshots__/Loading.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`BLoading active render correctly 1`] = `
 <transition-stub name="fade">
-    <div class="loading-overlay is-active is-full-page">
+    <div class="loading-overlay is-active is-full-page" style="">
         <div class="loading-background"></div>
         <div class="loading-icon"></div>
     </div>

package/src/components/message/Message.vue

@@ -1,7 +1,7 @@
 <template>
     <transition name="fade">
         <article
-            v-if="isActive"
+            v-show="isActive"
             class="message"
             :class="[type, size]">
             <header v-if="$slots.header || title" class="message-header">
@@ -32,6 +32,12 @@
                     </div>
                 </div>
             </section>
+            <b-progress
+                v-if="autoClose && progressBar"
+                :value="remainingTime - 1"
+                :max="duration / 1000 - 1"
+                :type="type"
+                :rounded="false"/>
         </article>
     </transition>
 </template>

package/src/components/message/__snapshots__/Message.spec.js.snap

@@ -4,5 +4,6 @@ exports[`BMessage render correctly 1`] = `
 <article class="message" name="fade">
     <!---->
     <!---->
+    <!---->
 </article>
 `;

package/src/components/modal/Modal.vue

@@ -40,6 +40,7 @@
                     v-if="showX"
                     v-show="!animating"
                     class="modal-close is-large"
+                    :aria-label="closeButtonAriaLabel"
                     @click="cancel('x')"/>
             </div>
         </div>
@@ -131,6 +132,7 @@ export default {
                 return Boolean(value)
             }
         },
+        closeButtonAriaLabel: String,
         destroyOnHide: {
             type: Boolean,
             default: true

package/src/components/navbar/Navbar.vue

@@ -176,7 +176,11 @@ export default {
                         isOpened: this.isOpened
                     },
                     on: {
-                        click: this.toggleActive
+                        click: this.toggleActive,
+                        keyup: (event) => {
+                            if (event.keyCode !== 13) return
+                            this.toggleActive()
+                        }
                     }
                 })
 

package/src/components/navbar/NavbarBurger.vue

@@ -6,6 +6,7 @@
         aria-label="menu"
         :aria-expanded="isOpened"
         v-on="$listeners"
+        tabindex="0"
     >
         <span aria-hidden="true"/>
         <span aria-hidden="true"/>

package/src/components/navbar/NavbarDropdown.vue

@@ -17,9 +17,11 @@
             }"
             v-bind="$attrs"
             v-on="$listeners"
-            role="menuitem"
             aria-haspopup="true"
-            @click.prevent="newActive = !newActive">
+            @click.prevent="toggleMenu"
+            @keyup.enter="toggleMenu"
+            tabindex="0"
+        >
             <template v-if="label">{{ label }}</template>
             <slot v-else name="label" />
         </component>
@@ -44,6 +46,7 @@ export default {
     directives: {
         clickOutside
     },
+    inheritAttrs: false,
     props: {
         label: String,
         hoverable: Boolean,
@@ -74,6 +77,9 @@ export default {
         }
     },
     methods: {
+        toggleMenu() {
+            this.newActive = !this.newActive
+        },
         showMenu() {
             this.newActive = true
         },

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

@@ -1,11 +1,11 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BNavbar render correctly 1`] = `
-<nav role="navigation" aria-label="main navigation" class="navbar">
-    <div class="navbar-brand"><a role="button" aria-label="menu" class="navbar-burger burger"><span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span></a></div>
-    <div class="navbar-menu">
-        <div class="navbar-start"></div>
-        <div class="navbar-end"></div>
-    </div>
-</nav>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BNavbar render correctly 1`] = `
+<nav role="navigation" aria-label="main navigation" class="navbar">
+    <div class="navbar-brand"><a role="button" aria-label="menu" tabindex="0" class="navbar-burger burger"><span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span></a></div>
+    <div class="navbar-menu">
+        <div class="navbar-start"></div>
+        <div class="navbar-end"></div>
+    </div>
+</nav>
+`;

package/src/components/navbar/__snapshots__/NavBarBurger.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BNavbarBurger render correctly 1`] = `<a role="button" aria-label="menu" tabindex="0" class="navbar-burger burger"><span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span></a>`;

package/src/components/navbar/__snapshots__/NavbarDropdown.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BNavbarDropdown render correctly 1`] = `
-<div class="navbar-item has-dropdown"><a role="menuitem" aria-haspopup="true" class="navbar-link"></a>
+<div class="navbar-item has-dropdown"><a aria-haspopup="true" tabindex="0" class="navbar-link"></a>
     <div class="navbar-dropdown"></div>
 </div>
 `;

package/src/components/notification/Notification.vue

@@ -31,6 +31,12 @@
                     </template>
                 </div>
             </div>
+            <b-progress
+                v-if="progressBar"
+                :value="remainingTime - 1"
+                :max="duration / 1000 - 1"
+                :type="type"
+                :rounded="false"/>
         </article>
     </transition>
 </template>

package/src/components/notification/NotificationNotice.vue

@@ -3,7 +3,9 @@
         v-bind="$options.propsData"
         ref="notification"
         @click="click"
-        @close="close">
+        @close="close"
+        @mouseenter.native="pause"
+        @mouseleave.native="removePause">
         <slot />
     </b-notification>
 </template>
@@ -11,6 +13,7 @@
 <script>
 import config from '../../utils/config'
 import NoticeMixin from '../../utils/NoticeMixin.js'
+import { removeElement } from '../../utils/helpers'
 
 export default {
     name: 'BNotificationNotice',
@@ -21,8 +24,18 @@ export default {
         }
     },
     methods: {
-        timeoutCallback() {
-            return this.$refs.notification.close()
+        close() {
+            if (!this.isPaused) {
+                clearTimeout(this.timer)
+                this.$refs.notification.isActive = false
+                this.$emit('close')
+
+                // Timeout for the animation complete before destroying
+                setTimeout(() => {
+                    this.$destroy()
+                    removeElement(this.$el)
+                }, 150)
+            }
         }
     }
 }

package/src/components/notification/__snapshots__/Notification.spec.js.snap

@@ -3,5 +3,6 @@
 exports[`BNotification render correctly 1`] = `
 <article class="notification" name="fade"><button type="button" class="delete"></button>
     <!---->
+    <!---->
 </article>
 `;

package/src/components/numberinput/Numberinput.spec.js

@@ -91,6 +91,16 @@ describe('BNumberinput', () => {
 
             expect(wrapper.vm.computedValue).toBe(val)
         })
+
+        it('increments/decrements after manually set value on input', async () => {
+            wrapper.setProps({exponential: true, value: 1, step: 1})
+            const BASE_VALUE = Math.floor(Math.random() * 10 + 1)
+            wrapper.find('input').setValue(BASE_VALUE)
+            wrapper.find('.control.plus button').trigger('click')
+            wrapper.find('.control.minus button').trigger('click')
+
+            expect(wrapper.vm.computedValue).toEqual(BASE_VALUE)
+        })
     })
 
     describe('Rendered (shallow)', () => {