buefy 0.9.9 → 0.9.13

package/src/components/autocomplete/Autocomplete.vue

@@ -38,7 +38,14 @@
                     class="dropdown-content"
                     v-show="isActive"
                     :style="contentStyle">
-                    <div v-if="hasHeaderSlot" class="dropdown-item">
+                    <div
+                        v-if="hasHeaderSlot"
+                        class="dropdown-item dropdown-header"
+                        role="button"
+                        tabindex="0"
+                        :class="{ 'is-hovered': headerHovered }"
+                        @click="selectHeaderOrFoterByClick($event, 'header')"
+                    >
                         <slot name="header" />
                     </div>
                     <template v-for="(element, groupindex) in computedData">
@@ -62,7 +69,7 @@
                             role="button"
                             tabindex="0"
                             :class="{ 'is-hovered': option === hovered }"
-                            @click="setSelected(option, undefined, $event)"
+                            @click.stop="setSelected(option, !keepOpen, $event)"
                         >
                             <slot
                                 v-if="hasDefaultSlot"
@@ -78,7 +85,14 @@
                         class="dropdown-item is-disabled">
                         <slot name="empty" />
                     </div>
-                    <div v-if="hasFooterSlot" class="dropdown-item">
+                    <div
+                        v-if="hasFooterSlot"
+                        class="dropdown-item dropdown-footer"
+                        role="button"
+                        tabindex="0"
+                        :class="{ 'is-hovered': footerHovered }"
+                        @click="selectHeaderOrFoterByClick($event, 'footer')"
+                    >
                         <slot name="footer" />
                     </div>
                 </div>
@@ -140,12 +154,16 @@ export default {
         confirmKeys: {
             type: Array,
             default: () => ['Tab', 'Enter']
-        }
+        },
+        selectableHeader: Boolean,
+        selectableFooter: Boolean
     },
     data() {
         return {
             selected: null,
             hovered: null,
+            headerHovered: null,
+            footerHovered: null,
             isActive: false,
             newValue: this.value,
             newAutocomplete: this.autocomplete || 'off',
@@ -310,9 +328,7 @@ export default {
             this.$emit('input', value)
             // Check if selected is invalid
             const currentValue = this.getValue(this.selected)
-            // empty or different value
-            if ((typeof currentValue === 'undefined' || currentValue === null) ||
-                (currentValue && currentValue !== value)) {
+            if (currentValue && currentValue !== value) {
                 this.setSelected(null, false)
             }
             // Close dropdown if input is clear or else open it
@@ -362,11 +378,16 @@ export default {
          */
         setSelected(option, closeDropdown = true, event = undefined) {
             if (option === undefined) return
-
             this.selected = option
             this.$emit('select', this.selected, event)
             if (this.selected !== null) {
-                this.newValue = this.clearOnSelect ? '' : this.getValue(this.selected)
+                if (this.clearOnSelect) {
+                    const input = this.$refs.input
+                    input.newValue = ''
+                    input.$refs.input.value = ''
+                } else {
+                    this.newValue = this.getValue(this.selected)
+                }
                 this.setHovered(null)
             }
             closeDropdown && this.$nextTick(() => {
@@ -394,26 +415,50 @@ export default {
 
         keydown(event) {
             const { key } = event // cannot destructure preventDefault (https://stackoverflow.com/a/49616808/2774496)
-
             // prevent emit submit event
             if (key === 'Enter') event.preventDefault()
-
             // Close dropdown on Tab & no hovered
             if (key === 'Escape' || key === 'Tab') {
-                event.preventDefault()
                 this.isActive = false
             }
-            if (this.hovered === null) return
+
             if (this.confirmKeys.indexOf(key) >= 0) {
                 // If adding by comma, don't add the comma to the input
                 if (key === ',') event.preventDefault()
-
                 // Close dropdown on select by Tab
                 const closeDropdown = !this.keepOpen || key === 'Tab'
+                if (this.hovered === null) {
+                    // header and footer uses headerHovered && footerHovered. If header or footer
+                    // was selected then fire event otherwise just return so a value isn't selected
+                    this.checkIfHeaderOrFooterSelected(event, null, closeDropdown)
+                    return
+                }
                 this.setSelected(this.hovered, closeDropdown, event)
             }
         },
 
+        selectHeaderOrFoterByClick(event, origin) {
+            this.checkIfHeaderOrFooterSelected(event, {origin: origin})
+        },
+
+        /**
+         * Check if header or footer was selected.
+         */
+        checkIfHeaderOrFooterSelected(event, triggerClick, closeDropdown = true) {
+            if (this.selectableHeader && (this.headerHovered || (triggerClick && triggerClick.origin === 'header'))) {
+                this.$emit('select-header', event)
+                this.headerHovered = false
+                if (triggerClick) this.setHovered(null)
+                if (closeDropdown) this.isActive = false
+            }
+            if (this.selectableFooter && (this.footerHovered || (triggerClick && triggerClick.origin === 'footer'))) {
+                this.$emit('select-footer', event)
+                this.footerHovered = false
+                if (triggerClick) this.setHovered(null)
+                if (closeDropdown) this.isActive = false
+            }
+        },
+
         /**
          * Close dropdown if clicked outside.
          */
@@ -484,14 +529,44 @@ export default {
             if (this.isActive) {
                 const data = this.computedData.map(
                     (d) => d.items).reduce((a, b) => ([...a, ...b]), [])
-                let index = data.indexOf(this.hovered) + sum
+                if (this.hasHeaderSlot && this.selectableHeader) {
+                    data.unshift(undefined)
+                }
+                if (this.hasFooterSlot && this.selectableFooter) {
+                    data.push(undefined)
+                }
+
+                let index
+                if (this.headerHovered) {
+                    index = 0 + sum
+                } else if (this.footerHovered) {
+                    index = (data.length - 1) + sum
+                } else {
+                    index = data.indexOf(this.hovered) + sum
+                }
+
                 index = index > data.length - 1 ? data.length - 1 : index
                 index = index < 0 ? 0 : index
 
-                this.setHovered(data[index])
+                this.footerHovered = false
+                this.headerHovered = false
+                this.setHovered(data[index] !== undefined ? data[index] : null)
+                if (this.hasFooterSlot && this.selectableFooter && index === data.length - 1) {
+                    this.footerHovered = true
+                }
+                if (this.hasHeaderSlot && this.selectableHeader && index === 0) {
+                    this.headerHovered = true
+                }
 
                 const list = this.$refs.dropdown.querySelector('.dropdown-content')
-                const element = list.querySelectorAll('a.dropdown-item:not(.is-disabled)')[index]
+                let querySelectorText = 'a.dropdown-item:not(.is-disabled)'
+                if (this.hasHeaderSlot && this.selectableHeader) {
+                    querySelectorText += ',div.dropdown-header'
+                }
+                if (this.hasFooterSlot && this.selectableFooter) {
+                    querySelectorText += ',div.dropdown-footer'
+                }
+                const element = list.querySelectorAll(querySelectorText)[index]
 
                 if (!element) return
 
@@ -534,7 +609,7 @@ export default {
             this.hasFocus = false
             this.$emit('blur', event)
         },
-        onInput(event) {
+        onInput() {
             const currentValue = this.getValue(this.selected)
             if (currentValue && currentValue === this.newValue) return
             this.$emit('typing', this.newValue)

package/src/components/breadcrumb/Breadcrumb.spec.js

@@ -0,0 +1,63 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import BBreadcrumb from '@components/breadcrumb/Breadcrumb'
+
+describe('BBreadcrumb', () => {
+    let wrapper
+
+    beforeEach(() => {
+        wrapper = shallowMount(BBreadcrumb)
+    })
+
+    it('is called', () => {
+        expect(wrapper.name()).toBe('BBreadcrumb')
+        expect(wrapper.isVueInstance()).toBeTruthy()
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should set align to right', () => {
+        wrapper = mount(BBreadcrumb, {
+            propsData: {
+                align: 'is-right'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('is-right')
+    })
+
+    it('should set separator to arrow', () => {
+        wrapper = mount(BBreadcrumb, {
+            propsData: {
+                separator: 'has-arrow-separator'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('has-arrow-separator')
+    })
+
+    it('should set size to large', () => {
+        wrapper = mount(BBreadcrumb, {
+            propsData: {
+                size: 'is-large'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('is-large')
+    })
+
+    it('computes breadcrumbClasses correctly', () => {
+        wrapper = mount(BBreadcrumb, {
+            propsData: {
+                align: 'is-left',
+                separator: 'has-dot-separator',
+                size: 'is-medium'
+            }
+        })
+
+        expect(wrapper.classes()).toContain('is-left')
+        expect(wrapper.classes()).toContain('has-dot-separator')
+        expect(wrapper.classes()).toContain('is-medium')
+    })
+})

package/src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,43 @@
+<template>
+    <nav :class="breadcrumbClasses">
+        <ul>
+            <slot />
+        </ul>
+    </nav>
+</template>
+
+<script>
+import config from '../../utils/config'
+
+export default {
+
+    name: 'BBreadcrumb',
+
+    props: {
+        align: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbAlign
+            }
+        },
+        separator: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbSeparator
+            }
+        },
+        size: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbSize
+            }
+        }
+    },
+
+    computed: {
+        breadcrumbClasses() {
+            return ['breadcrumb', this.align, this.separator, this.size]
+        }
+    }
+}
+</script>

package/src/components/breadcrumb/BreadcrumbItem.spec.js

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils'
+import BBreadcrumbItem from '@components/breadcrumb/BreadcrumbItem.vue'
+
+describe('BBreadcrumbItem', () => {
+    let wrapper
+    beforeEach(() => {
+        wrapper = mount(BBreadcrumbItem, {
+            propsData: {
+                tag: 'a'
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.isVueInstance()).toBeTruthy()
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should have a li tag', () => {
+        expect(wrapper.contains('li')).toBeTruthy()
+    })
+})

package/src/components/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,33 @@
+<template>
+    <li
+        :class="{ 'is-active': active }">
+        <component
+            :is="tag"
+            v-bind="$attrs"
+            v-on="$listeners"
+        >
+            <slot />
+        </component>
+    </li>
+</template>
+
+<script>
+import config from '../../utils/config'
+
+export default {
+
+    name: 'BBreadcrumbItem',
+
+    inheritAttrs: false,
+
+    props: {
+        tag: {
+            type: String,
+            default: () => {
+                return config.defaultBreadcrumbTag
+            }
+        },
+        active: Boolean
+    }
+}
+</script>

package/src/components/breadcrumb/__snapshots__/Breadcrumb.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BBreadcrumb render correctly 1`] = `
+<nav class="breadcrumb is-left is-medium">
+    <ul></ul>
+</nav>
+`;

package/src/components/breadcrumb/__snapshots__/BreadcrumbItem.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BBreadcrumbItem render correctly 1`] = `
+<li class="">
+    <router-link to="/"></router-link>
+</li>
+`;

package/src/components/breadcrumb/index.js

@@ -0,0 +1,20 @@
+import Breadcrumb from './Breadcrumb'
+import BreadcrumbItem from './BreadcrumbItem'
+
+import { use, registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue) {
+        registerComponent(Vue, Breadcrumb)
+        registerComponent(Vue, BreadcrumbItem)
+    }
+}
+
+use(Plugin)
+
+export default Plugin
+
+export {
+    Breadcrumb as BBreadcrumb,
+    BreadcrumbItem as BBreadcrumbItem
+}

package/src/components/carousel/CarouselList.vue

@@ -59,11 +59,13 @@ import {sign, mod, bound} from '../../utils/helpers'
 import config from '../../utils/config'
 
 import Icon from '../icon/Icon'
+import Image from '../image/Image'
 
 export default {
     name: 'BCarouselList',
     components: {
-        [Icon.name]: Icon
+        [Icon.name]: Icon,
+        [Image.name]: Image
     },
     props: {
         data: {

package/src/components/carousel/__snapshots__/CarouselList.spec.js.snap

@@ -4,28 +4,148 @@ exports[`BCarouselList render correctly 1`] = `
 <div class="carousel-list">
     <div class="carousel-slides" style="transform: translateX(0px);">
         <div class="carousel-slide is-active" style="width: 0px;">
-            <b-image src="https://picsum.photos/id/0/1230/500" title="Slide 1" image="https://picsum.photos/id/0/1230/500"></b-image>
+            <b-image-stub src="https://picsum.photos/id/0/1230/500" lazy="true" responsive="true" srcsetformatter="function _default(src, size, vm) {
+                    /* istanbul ignore next */cov_13zmb589fa.f[6]++;
+                    cov_13zmb589fa.s[13]++;
+
+                    if (typeof _config2.default.defaultImageSrcsetFormatter === 'function') {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][0]++;
+                        cov_13zmb589fa.s[14]++;
+
+                        return _config2.default.defaultImageSrcsetFormatter(src, size);
+                    } else {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][1]++;
+                        cov_13zmb589fa.s[15]++;
+
+                        return vm.formatSrcset(src, size);
+                    }
+                }" title="Slide 1" image="https://picsum.photos/id/0/1230/500"></b-image-stub>
         </div>
         <div class="carousel-slide" style="width: 0px;">
-            <b-image src="https://picsum.photos/id/1/1230/500" title="Slide 2" image="https://picsum.photos/id/1/1230/500"></b-image>
+            <b-image-stub src="https://picsum.photos/id/1/1230/500" lazy="true" responsive="true" srcsetformatter="function _default(src, size, vm) {
+                    /* istanbul ignore next */cov_13zmb589fa.f[6]++;
+                    cov_13zmb589fa.s[13]++;
+
+                    if (typeof _config2.default.defaultImageSrcsetFormatter === 'function') {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][0]++;
+                        cov_13zmb589fa.s[14]++;
+
+                        return _config2.default.defaultImageSrcsetFormatter(src, size);
+                    } else {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][1]++;
+                        cov_13zmb589fa.s[15]++;
+
+                        return vm.formatSrcset(src, size);
+                    }
+                }" title="Slide 2" image="https://picsum.photos/id/1/1230/500"></b-image-stub>
         </div>
         <div class="carousel-slide" style="width: 0px;">
-            <b-image src="https://picsum.photos/id/2/1230/500" title="Slide 3" image="https://picsum.photos/id/2/1230/500"></b-image>
+            <b-image-stub src="https://picsum.photos/id/2/1230/500" lazy="true" responsive="true" srcsetformatter="function _default(src, size, vm) {
+                    /* istanbul ignore next */cov_13zmb589fa.f[6]++;
+                    cov_13zmb589fa.s[13]++;
+
+                    if (typeof _config2.default.defaultImageSrcsetFormatter === 'function') {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][0]++;
+                        cov_13zmb589fa.s[14]++;
+
+                        return _config2.default.defaultImageSrcsetFormatter(src, size);
+                    } else {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][1]++;
+                        cov_13zmb589fa.s[15]++;
+
+                        return vm.formatSrcset(src, size);
+                    }
+                }" title="Slide 3" image="https://picsum.photos/id/2/1230/500"></b-image-stub>
         </div>
         <div class="carousel-slide" style="width: 0px;">
-            <b-image src="https://picsum.photos/id/3/1230/500" title="Slide 4" image="https://picsum.photos/id/3/1230/500"></b-image>
+            <b-image-stub src="https://picsum.photos/id/3/1230/500" lazy="true" responsive="true" srcsetformatter="function _default(src, size, vm) {
+                    /* istanbul ignore next */cov_13zmb589fa.f[6]++;
+                    cov_13zmb589fa.s[13]++;
+
+                    if (typeof _config2.default.defaultImageSrcsetFormatter === 'function') {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][0]++;
+                        cov_13zmb589fa.s[14]++;
+
+                        return _config2.default.defaultImageSrcsetFormatter(src, size);
+                    } else {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][1]++;
+                        cov_13zmb589fa.s[15]++;
+
+                        return vm.formatSrcset(src, size);
+                    }
+                }" title="Slide 4" image="https://picsum.photos/id/3/1230/500"></b-image-stub>
         </div>
         <div class="carousel-slide" style="width: 0px;">
-            <b-image src="https://picsum.photos/id/4/1230/500" title="Slide 5" image="https://picsum.photos/id/4/1230/500"></b-image>
+            <b-image-stub src="https://picsum.photos/id/4/1230/500" lazy="true" responsive="true" srcsetformatter="function _default(src, size, vm) {
+                    /* istanbul ignore next */cov_13zmb589fa.f[6]++;
+                    cov_13zmb589fa.s[13]++;
+
+                    if (typeof _config2.default.defaultImageSrcsetFormatter === 'function') {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][0]++;
+                        cov_13zmb589fa.s[14]++;
+
+                        return _config2.default.defaultImageSrcsetFormatter(src, size);
+                    } else {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][1]++;
+                        cov_13zmb589fa.s[15]++;
+
+                        return vm.formatSrcset(src, size);
+                    }
+                }" title="Slide 5" image="https://picsum.photos/id/4/1230/500"></b-image-stub>
         </div>
         <div class="carousel-slide" style="width: 0px;">
-            <b-image src="https://picsum.photos/id/5/1230/500" title="Slide 6" image="https://picsum.photos/id/5/1230/500"></b-image>
+            <b-image-stub src="https://picsum.photos/id/5/1230/500" lazy="true" responsive="true" srcsetformatter="function _default(src, size, vm) {
+                    /* istanbul ignore next */cov_13zmb589fa.f[6]++;
+                    cov_13zmb589fa.s[13]++;
+
+                    if (typeof _config2.default.defaultImageSrcsetFormatter === 'function') {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][0]++;
+                        cov_13zmb589fa.s[14]++;
+
+                        return _config2.default.defaultImageSrcsetFormatter(src, size);
+                    } else {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][1]++;
+                        cov_13zmb589fa.s[15]++;
+
+                        return vm.formatSrcset(src, size);
+                    }
+                }" title="Slide 6" image="https://picsum.photos/id/5/1230/500"></b-image-stub>
         </div>
         <div class="carousel-slide" style="width: 0px;">
-            <b-image src="https://picsum.photos/id/6/1230/500" title="Slide 7" image="https://picsum.photos/id/6/1230/500"></b-image>
+            <b-image-stub src="https://picsum.photos/id/6/1230/500" lazy="true" responsive="true" srcsetformatter="function _default(src, size, vm) {
+                    /* istanbul ignore next */cov_13zmb589fa.f[6]++;
+                    cov_13zmb589fa.s[13]++;
+
+                    if (typeof _config2.default.defaultImageSrcsetFormatter === 'function') {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][0]++;
+                        cov_13zmb589fa.s[14]++;
+
+                        return _config2.default.defaultImageSrcsetFormatter(src, size);
+                    } else {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][1]++;
+                        cov_13zmb589fa.s[15]++;
+
+                        return vm.formatSrcset(src, size);
+                    }
+                }" title="Slide 7" image="https://picsum.photos/id/6/1230/500"></b-image-stub>
         </div>
         <div class="carousel-slide" style="width: 0px;">
-            <b-image src="https://picsum.photos/id/7/1230/500" title="Slide 8" image="https://picsum.photos/id/7/1230/500"></b-image>
+            <b-image-stub src="https://picsum.photos/id/7/1230/500" lazy="true" responsive="true" srcsetformatter="function _default(src, size, vm) {
+                    /* istanbul ignore next */cov_13zmb589fa.f[6]++;
+                    cov_13zmb589fa.s[13]++;
+
+                    if (typeof _config2.default.defaultImageSrcsetFormatter === 'function') {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][0]++;
+                        cov_13zmb589fa.s[14]++;
+
+                        return _config2.default.defaultImageSrcsetFormatter(src, size);
+                    } else {
+                        /* istanbul ignore next */cov_13zmb589fa.b[2][1]++;
+                        cov_13zmb589fa.s[15]++;
+
+                        return vm.formatSrcset(src, size);
+                    }
+                }" title="Slide 8" image="https://picsum.photos/id/7/1230/500"></b-image-stub>
         </div>
     </div>
     <div class="carousel-arrow is-hovered">