buefy 0.9.13 → 0.9.14

package/src/components/tabs/Tabs.vue

@@ -1,183 +1,185 @@
-<template>
-    <div class="b-tabs" :class="mainClasses">
-        <nav
-            class="tabs"
-            :class="navClasses"
-            role="tablist"
-            :aria-orientation="vertical ? 'vertical' : 'horizontal'"
-            @keydown="manageTablistKeydown"
-        >
-            <ul>
-                <li
-                    v-for="(childItem, childIdx) in items"
-                    :key="childItem.value"
-                    v-show="childItem.visible"
-                    :class="[ childItem.headerClass, { 'is-active': childItem.isActive,
-                                                       'is-disabled': childItem.disabled }]"
-                    role="presentation"
-                >
-                    <b-slot-component
-                        ref="tabLink"
-                        v-if="childItem.$scopedSlots.header"
-                        :component="childItem"
-                        name="header"
-                        tag="a"
-                        role="tab"
-                        :id="`${childItem.value}-label`"
-                        :aria-controls="`${childItem.value}-content`"
-                        :aria-selected="`${childItem.isActive}`"
-                        :tabindex="childItem.isActive ? 0 : -1"
-                        @focus.native="currentFocus = childIdx"
-                        @click.native="childClick(childItem)"
-                        @keydown="manageTabKeydown($event, childItem)"
-                    />
-                    <a
-                        ref="tabLink"
-                        v-else
-                        role="tab"
-                        :id="`${childItem.value}-tab`"
-                        :aria-controls="`${childItem.value}-content`"
-                        :aria-selected="`${childItem.isActive}`"
-                        :tabindex="childItem.isActive ? 0 : -1"
-                        @focus="currentFocus = childIdx"
-                        @click="childClick(childItem)"
-                        @keydown="manageTabKeydown($event, childItem)"
-                    >
-                        <b-icon
-                            v-if="childItem.icon"
-                            :icon="childItem.icon"
-                            :pack="childItem.iconPack"
-                            :size="size"/>
-                        <span>{{ childItem.label }}</span>
-                    </a>
-                </li>
-            </ul>
-        </nav>
-        <section class="tab-content" :class="{'is-transitioning': isTransitioning}">
-            <slot/>
-        </section>
-    </div>
-</template>
-
-<script>
-import config from '../../utils/config'
-import TabbedMixin from '../../utils/TabbedMixin.js'
-
-export default {
-    name: 'BTabs',
-    mixins: [TabbedMixin('tab')],
-    props: {
-        expanded: {
-            type: Boolean,
-            default: () => {
-                return config.defaultTabsExpanded
-            }
-        },
-        type: {
-            type: [String, Object],
-            default: () => {
-                return config.defaultTabsType
-            }
-        },
-        animated: {
-            type: Boolean,
-            default: () => {
-                return config.defaultTabsAnimated
-            }
-        },
-        multiline: Boolean
-    },
-    data() {
-        return {
-            currentFocus: this.value
-        }
-    },
-    computed: {
-        mainClasses() {
-            return {
-                'is-fullwidth': this.expanded,
-                'is-vertical': this.vertical,
-                'is-multiline': this.multiline,
-                [this.position]: this.position && this.vertical
-            }
-        },
-        navClasses() {
-            return [
-                this.type,
-                this.size,
-                {
-                    [this.position]: this.position && !this.vertical,
-                    'is-fullwidth': this.expanded,
-                    'is-toggle': this.type === 'is-toggle-rounded'
-                }
-            ]
-        }
-    },
-    methods: {
-        giveFocusToTab(tab) {
-            if (tab.$el && tab.$el.focus) {
-                tab.$el.focus()
-            } else if (tab.focus) {
-                tab.focus()
-            }
-        },
-        manageTablistKeydown(event) {
-            // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
-            const { key } = event
-            switch (key) {
-                case this.vertical ? 'ArrowUp' : 'ArrowLeft':
-                case this.vertical ? 'Up' : 'Left': {
-                    let prevIdx = this.getPrevItemIdx(this.currentFocus, true)
-                    if (prevIdx === null) {
-                        // We try to give focus back to the last visible element
-                        prevIdx = this.getPrevItemIdx(this.items.length, true)
-                    }
-                    if (
-                        prevIdx !== null &&
-                        this.$refs.tabLink &&
-                        prevIdx < this.$refs.tabLink.length &&
-                        !this.items[prevIdx].disabled
-                    ) {
-                        this.giveFocusToTab(this.$refs.tabLink[prevIdx])
-                    }
-                    event.preventDefault()
-                    break
-                }
-                case this.vertical ? 'ArrowDown' : 'ArrowRight':
-                case this.vertical ? 'Down' : 'Right': {
-                    let nextIdx = this.getNextItemIdx(this.currentFocus, true)
-                    if (nextIdx === null) {
-                        // We try to give focus back to the first visible element
-                        nextIdx = this.getNextItemIdx(-1, true)
-                    }
-                    if (
-                        nextIdx !== null &&
-                        this.$refs.tabLink &&
-                        nextIdx < this.$refs.tabLink.length &&
-                        !this.items[nextIdx].disabled
-                    ) {
-                        this.giveFocusToTab(this.$refs.tabLink[nextIdx])
-                    }
-                    event.preventDefault()
-                    break
-                }
-            }
-        },
-
-        manageTabKeydown(event, childItem) {
-            // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
-            const { key } = event
-            switch (key) {
-                case ' ':
-                case 'Space':
-                case 'Spacebar':
-                case 'Enter': {
-                    this.childClick(childItem)
-                    event.preventDefault()
-                    break
-                }
-            }
-        }
-    }
-}
-</script>
+<template>
+    <div class="b-tabs" :class="mainClasses">
+        <nav
+            class="tabs"
+            :class="navClasses"
+            role="tablist"
+            :aria-orientation="vertical ? 'vertical' : 'horizontal'"
+            @keydown="manageTablistKeydown"
+        >
+            <slot name="start" />
+            <ul>
+                <li
+                    v-for="(childItem, childIdx) in items"
+                    :key="childItem.value"
+                    v-show="childItem.visible"
+                    :class="[ childItem.headerClass, { 'is-active': childItem.isActive,
+                                                       'is-disabled': childItem.disabled }]"
+                    role="presentation"
+                >
+                    <b-slot-component
+                        ref="tabLink"
+                        v-if="childItem.$scopedSlots.header"
+                        :component="childItem"
+                        name="header"
+                        tag="a"
+                        role="tab"
+                        :id="`${childItem.value}-label`"
+                        :aria-controls="`${childItem.value}-content`"
+                        :aria-selected="`${childItem.isActive}`"
+                        :tabindex="childItem.isActive ? 0 : -1"
+                        @focus.native="currentFocus = childIdx"
+                        @click.native="childClick(childItem)"
+                        @keydown="manageTabKeydown($event, childItem)"
+                    />
+                    <a
+                        ref="tabLink"
+                        v-else
+                        role="tab"
+                        :id="`${childItem.value}-tab`"
+                        :aria-controls="`${childItem.value}-content`"
+                        :aria-selected="`${childItem.isActive}`"
+                        :tabindex="childItem.isActive ? 0 : -1"
+                        @focus="currentFocus = childIdx"
+                        @click="childClick(childItem)"
+                        @keydown="manageTabKeydown($event, childItem)"
+                    >
+                        <b-icon
+                            v-if="childItem.icon"
+                            :icon="childItem.icon"
+                            :pack="childItem.iconPack"
+                            :size="size"/>
+                        <span>{{ childItem.label }}</span>
+                    </a>
+                </li>
+            </ul>
+            <slot name="end" />
+        </nav>
+        <section class="tab-content" :class="{'is-transitioning': isTransitioning}">
+            <slot/>
+        </section>
+    </div>
+</template>
+
+<script>
+import config from '../../utils/config'
+import TabbedMixin from '../../utils/TabbedMixin.js'
+
+export default {
+    name: 'BTabs',
+    mixins: [TabbedMixin('tab')],
+    props: {
+        expanded: {
+            type: Boolean,
+            default: () => {
+                return config.defaultTabsExpanded
+            }
+        },
+        type: {
+            type: [String, Object],
+            default: () => {
+                return config.defaultTabsType
+            }
+        },
+        animated: {
+            type: Boolean,
+            default: () => {
+                return config.defaultTabsAnimated
+            }
+        },
+        multiline: Boolean
+    },
+    data() {
+        return {
+            currentFocus: this.value
+        }
+    },
+    computed: {
+        mainClasses() {
+            return {
+                'is-fullwidth': this.expanded,
+                'is-vertical': this.vertical,
+                'is-multiline': this.multiline,
+                [this.position]: this.position && this.vertical
+            }
+        },
+        navClasses() {
+            return [
+                this.type,
+                this.size,
+                {
+                    [this.position]: this.position && !this.vertical,
+                    'is-fullwidth': this.expanded,
+                    'is-toggle': this.type === 'is-toggle-rounded'
+                }
+            ]
+        }
+    },
+    methods: {
+        giveFocusToTab(tab) {
+            if (tab.$el && tab.$el.focus) {
+                tab.$el.focus()
+            } else if (tab.focus) {
+                tab.focus()
+            }
+        },
+        manageTablistKeydown(event) {
+            // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
+            const { key } = event
+            switch (key) {
+                case this.vertical ? 'ArrowUp' : 'ArrowLeft':
+                case this.vertical ? 'Up' : 'Left': {
+                    let prevIdx = this.getPrevItemIdx(this.currentFocus, true)
+                    if (prevIdx === null) {
+                        // We try to give focus back to the last visible element
+                        prevIdx = this.getPrevItemIdx(this.items.length, true)
+                    }
+                    if (
+                        prevIdx !== null &&
+                        this.$refs.tabLink &&
+                        prevIdx < this.$refs.tabLink.length &&
+                        !this.items[prevIdx].disabled
+                    ) {
+                        this.giveFocusToTab(this.$refs.tabLink[prevIdx])
+                    }
+                    event.preventDefault()
+                    break
+                }
+                case this.vertical ? 'ArrowDown' : 'ArrowRight':
+                case this.vertical ? 'Down' : 'Right': {
+                    let nextIdx = this.getNextItemIdx(this.currentFocus, true)
+                    if (nextIdx === null) {
+                        // We try to give focus back to the first visible element
+                        nextIdx = this.getNextItemIdx(-1, true)
+                    }
+                    if (
+                        nextIdx !== null &&
+                        this.$refs.tabLink &&
+                        nextIdx < this.$refs.tabLink.length &&
+                        !this.items[nextIdx].disabled
+                    ) {
+                        this.giveFocusToTab(this.$refs.tabLink[nextIdx])
+                    }
+                    event.preventDefault()
+                    break
+                }
+            }
+        },
+
+        manageTabKeydown(event, childItem) {
+            // https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values#Navigation_keys
+            const { key } = event
+            switch (key) {
+                case ' ':
+                case 'Space':
+                case 'Spacebar':
+                case 'Enter': {
+                    this.childClick(childItem)
+                    event.preventDefault()
+                    break
+                }
+            }
+        }
+    }
+}
+</script>

package/src/components/timepicker/__snapshots__/Timepicker.spec.js.snap

@@ -6,35 +6,32 @@ exports[`BTimepicker render correctly 1`] = `
         <b-dropdown-item-stub custom="true" focusable="true" ariarole="">
             <b-field-stub grouped="true" position="is-centered" addons="true">
                 <b-select-stub usehtml5validation="true" statusicon="true" placeholder="00">
-                    <option value="0">
-                        00
-                    </option>
                     <option value="1">
-                        01
+                        1
                     </option>
                     <option value="2">
-                        02
+                        2
                     </option>
                     <option value="3">
-                        03
+                        3
                     </option>
                     <option value="4">
-                        04
+                        4
                     </option>
                     <option value="5">
-                        05
+                        5
                     </option>
                     <option value="6">
-                        06
+                        6
                     </option>
                     <option value="7">
-                        07
+                        7
                     </option>
                     <option value="8">
-                        08
+                        8
                     </option>
                     <option value="9">
-                        09
+                        9
                     </option>
                     <option value="10">
                         10
@@ -42,42 +39,9 @@ exports[`BTimepicker render correctly 1`] = `
                     <option value="11">
                         11
                     </option>
-                    <option value="12">
+                    <option value="0">
                         12
                     </option>
-                    <option value="13">
-                        13
-                    </option>
-                    <option value="14">
-                        14
-                    </option>
-                    <option value="15">
-                        15
-                    </option>
-                    <option value="16">
-                        16
-                    </option>
-                    <option value="17">
-                        17
-                    </option>
-                    <option value="18">
-                        18
-                    </option>
-                    <option value="19">
-                        19
-                    </option>
-                    <option value="20">
-                        20
-                    </option>
-                    <option value="21">
-                        21
-                    </option>
-                    <option value="22">
-                        22
-                    </option>
-                    <option value="23">
-                        23
-                    </option>
                 </b-select-stub> <span class="control is-colon">:</span>
                 <b-select-stub usehtml5validation="true" statusicon="true" placeholder="00">
                     <option value="0">
@@ -262,7 +226,14 @@ exports[`BTimepicker render correctly 1`] = `
                     </option>
                 </b-select-stub>
                 <!---->
-                <!---->
+                <b-select-stub usehtml5validation="true" statusicon="true" value="AM">
+                    <option value="AM">
+                        AM
+                    </option>
+                    <option value="PM">
+                        PM
+                    </option>
+                </b-select-stub>
             </b-field-stub>
             <!---->
         </b-dropdown-item-stub>

package/src/components/upload/Upload.vue

@@ -75,7 +75,7 @@ export default {
         /**
          *   When v-model is changed:
          *   1. Set internal value.
-         *   2. Reset interna input file value
+         *   2. Reset internal input file value
          *   3. If it's invalid, validate again.
          */
         value(value) {
@@ -104,8 +104,15 @@ export default {
                 else {
                     const file = value[0]
                     if (this.checkType(file)) this.newValue = file
-                    else if (this.newValue) this.newValue = null
-                    else return
+                    else if (this.newValue) {
+                        this.newValue = null
+                        this.clearInput()
+                    } else {
+                        // Force input back to empty state and recheck validity
+                        this.clearInput()
+                        this.checkHtml5Validity()
+                        return
+                    }
                 }
             } else {
                 // always new values if native or undefined local
@@ -127,6 +134,13 @@ export default {
             !this.dragDrop && this.checkHtml5Validity()
         },
 
+        /*
+        * Reset file input value
+        */
+        clearInput() {
+            this.$refs.input.value = null
+        },
+
         /**
         * Listen drag-drop to update internal variable
         */
@@ -149,10 +163,8 @@ export default {
                 if (type) {
                     if (type.substring(0, 1) === '.') {
                         // check extension
-                        const extIndex = file.name.lastIndexOf('.')
-                        const extension = extIndex >= 0
-                            ? file.name.substring(extIndex) : ''
-                        if (extension.toLowerCase() === type.toLowerCase()) {
+                        const extension = file.name.toLowerCase().slice(-type.length)
+                        if (extension === type.toLowerCase()) {
                             valid = true
                         }
                     } else {

package/src/utils/NoticeMixin.js

@@ -126,11 +126,7 @@ export default {
         },
 
         showNotice() {
-            if (this.shouldQueue()) {
-                // Call recursively if should queue
-                setTimeout(() => this.showNotice(), 250)
-                return
-            }
+            if (this.shouldQueue()) this.correctParent.innerHTML = ''
             this.correctParent.insertAdjacentElement('afterbegin', this.$el)
             this.isActive = true
 

package/src/utils/config.js

@@ -31,7 +31,7 @@ let config = {
     defaultModalScroll: null,
     defaultDatepickerMobileNative: true,
     defaultTimepickerMobileNative: true,
-    defaultNoticeQueue: true,
+    defaultNoticeQueue: false,
     defaultInputHasCounter: true,
     defaultTaginputHasCounter: true,
     defaultUseHtml5Validation: true,

package/src/utils/helpers.js

@@ -174,6 +174,15 @@ export function escapeRegExpChars(value) {
     // eslint-disable-next-line
     return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&')
 }
+/**
+ * Remove accents/diacritics in a string in JavaScript
+ * https://stackoverflow.com/a/37511463
+ */
+export function removeDiacriticsFromString(value) {
+    if (!value) return value
+
+    return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+}
 
 export function multiColumnSort(inputArray, sortingPriority) {
     // clone it to prevent the any watchers from triggering every sorting iteration
@@ -289,3 +298,10 @@ export function isCustomElement(vm) {
 }
 
 export const isDefined = (d) => d !== undefined
+
+/**
+ * Checks if a value is null or undefined.
+ * Based on
+ * https://github.com/lodash/lodash/blob/master/isNil.js
+ */
+export const isNil = (value) => value !== null || value !== undefined

package/types/components.d.ts

@@ -303,6 +303,11 @@ declare type BModalConfig = {
      */
     ariaModal?: boolean;
 
+    /**
+     * Aria label attribute to be passed to the close button for better accessibility.
+     */
+    closeButtonAriaLabel?: string;
+
     /**
      * CSS classes to be applied on modal
     */