buefy 0.9.13 → 0.9.14

package/src/components/field/Field.vue

@@ -1,271 +1,271 @@
-<template>
-    <div class="field" :class="rootClasses">
-        <div
-            v-if="horizontal"
-            class="field-label"
-            :class="[customClass, fieldLabelSize]">
-            <label
-                v-if="hasLabel"
-                :for="labelFor"
-                :class="customClass"
-                class="label" >
-                <slot v-if="$slots.label" name="label"/>
-                <template v-else>{{ label }}</template>
-            </label>
-        </div>
-        <template v-else>
-            <label
-                v-if="hasLabel"
-                :for="labelFor"
-                :class="customClass"
-                class="label">
-                <slot v-if="$slots.label" name="label"/>
-                <template v-else>{{ label }}</template>
-            </label>
-        </template>
-        <b-field-body
-            v-if="horizontal"
-            :message="newMessage ? formattedMessage : ''"
-            :type="newType">
-            <slot/>
-        </b-field-body>
-        <div v-else-if="hasInnerField" class="field-body">
-            <b-field
-                :addons="false"
-                :class="innerFieldClasses">
-                <slot/>
-            </b-field>
-        </div>
-        <template v-else>
-            <slot/>
-        </template>
-        <p
-            v-if="hasMessage && !horizontal"
-            class="help"
-            :class="newType"
-        >
-            <slot v-if="$slots.message" name="message"/>
-            <template v-else>
-                <template v-for="(mess, i) in formattedMessage">
-                    {{ mess }}
-                    <br :key="i" v-if="(i + 1) < formattedMessage.length">
-                </template>
-            </template>
-        </p>
-    </div>
-</template>
-
-<script>
-import config from '../../utils/config'
-import FieldBody from './FieldBody'
-
-export default {
-    name: 'BField',
-    components: {
-        [FieldBody.name]: FieldBody
-    },
-    provide() {
-        return {
-            'BField': this
-        }
-    },
-    inject: {
-        parent: {
-            from: 'BField',
-            default: false
-        }
-    }, // Used internally only when using Field in Field
-    props: {
-        type: [String, Object],
-        label: String,
-        labelFor: String,
-        message: [String, Array, Object],
-        grouped: Boolean,
-        groupMultiline: Boolean,
-        position: String,
-        expanded: Boolean,
-        horizontal: Boolean,
-        addons: {
-            type: Boolean,
-            default: true
-        },
-        customClass: String,
-        labelPosition: {
-            type: String,
-            default: () => { return config.defaultFieldLabelPosition }
-        }
-    },
-    data() {
-        return {
-            newType: this.type,
-            newMessage: this.message,
-            fieldLabelSize: null,
-            _isField: true // Used internally by Input and Select
-        }
-    },
-    computed: {
-        rootClasses() {
-            return [{
-                'is-expanded': this.expanded,
-                'is-horizontal': this.horizontal,
-                'is-floating-in-label': this.hasLabel && !this.horizontal &&
-                    this.labelPosition === 'inside',
-                'is-floating-label': this.hasLabel && !this.horizontal &&
-                    this.labelPosition === 'on-border'
-            },
-            this.numberInputClasses]
-        },
-        innerFieldClasses() {
-            return [
-                this.fieldType(),
-                this.newPosition,
-                {
-                    'is-grouped-multiline': this.groupMultiline
-                }
-            ]
-        },
-        hasInnerField() {
-            return this.grouped || this.groupMultiline || this.hasAddons()
-        },
-        /**
-        * Correct Bulma class for the side of the addon or group.
-        *
-        * This is not kept like the others (is-small, etc.),
-        * because since 'has-addons' is set automatically it
-        * doesn't make sense to teach users what addons are exactly.
-        */
-        newPosition() {
-            if (this.position === undefined) return
-
-            const position = this.position.split('-')
-            if (position.length < 1) return
-
-            const prefix = this.grouped
-                ? 'is-grouped-'
-                : 'has-addons-'
-
-            if (this.position) return prefix + position[1]
-        },
-        /**
-        * Formatted message in case it's an array
-        * (each element is separated by <br> tag)
-        */
-        formattedMessage() {
-            if (this.parent && this.parent.hasInnerField) {
-                return '' // Message will be displayed in parent field
-            }
-            if (typeof this.newMessage === 'string') {
-                return [this.newMessage]
-            }
-            let messages = []
-            if (Array.isArray(this.newMessage)) {
-                this.newMessage.forEach((message) => {
-                    if (typeof message === 'string') {
-                        messages.push(message)
-                    } else {
-                        for (let key in message) {
-                            if (message[key]) {
-                                messages.push(key)
-                            }
-                        }
-                    }
-                })
-            } else {
-                for (let key in this.newMessage) {
-                    if (this.newMessage[key]) {
-                        messages.push(key)
-                    }
-                }
-            }
-            return messages.filter((m) => { if (m) return m })
-        },
-        hasLabel() {
-            return this.label || this.$slots.label
-        },
-        hasMessage() {
-            return ((!this.parent || !this.parent.hasInnerField) && this.newMessage) ||
-                this.$slots.message
-        },
-        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: {
-        /**
-        * Set internal type when prop change.
-        */
-        type(value) {
-            this.newType = value
-        },
-
-        /**
-        * Set internal message when prop change.
-        */
-        message(value) {
-            this.newMessage = value
-        },
-
-        /**
-        * Set parent message if we use Field in Field.
-        */
-        newMessage(value) {
-            if (this.parent && this.parent.hasInnerField) {
-                if (!this.parent.type) {
-                    this.parent.newType = this.newType
-                }
-                if (!this.parent.message) {
-                    this.parent.newMessage = value
-                }
-            }
-        }
-    },
-    methods: {
-        /**
-        * Field has addons if there are more than one slot
-        * (element / component) in the Field.
-        * Or is grouped when prop is set.
-        * Is a method to be called when component re-render.
-        */
-        fieldType() {
-            if (this.grouped) return 'is-grouped'
-            if (this.hasAddons()) return 'has-addons'
-        },
-        hasAddons() {
-            let renderedNode = 0
-            if (this.$slots.default) {
-                renderedNode = this.$slots.default.reduce((i, node) => node.tag ? i + 1 : i, 0)
-            }
-            return (
-                renderedNode > 1 &&
-                this.addons &&
-                !this.horizontal
-            )
-        }
-    },
-    mounted() {
-        if (this.horizontal) {
-            // Bulma docs: .is-normal for any .input or .button
-            const elements = this.$el.querySelectorAll('.input, .select, .button, .textarea, .b-slider')
-            if (elements.length > 0) {
-                this.fieldLabelSize = 'is-normal'
-            }
-        }
-    }
-}
-
-</script>
+<template>
+    <div class="field" :class="rootClasses">
+        <div
+            v-if="horizontal"
+            class="field-label"
+            :class="[customClass, fieldLabelSize]">
+            <label
+                v-if="hasLabel"
+                :for="labelFor"
+                :class="customClass"
+                class="label" >
+                <slot v-if="$slots.label" name="label"/>
+                <template v-else>{{ label }}</template>
+            </label>
+        </div>
+        <template v-else>
+            <label
+                v-if="hasLabel"
+                :for="labelFor"
+                :class="customClass"
+                class="label">
+                <slot v-if="$slots.label" name="label"/>
+                <template v-else>{{ label }}</template>
+            </label>
+        </template>
+        <b-field-body
+            v-if="horizontal"
+            :message="newMessage ? formattedMessage : ''"
+            :type="newType">
+            <slot/>
+        </b-field-body>
+        <div v-else-if="hasInnerField" class="field-body">
+            <b-field
+                :addons="false"
+                :class="innerFieldClasses">
+                <slot/>
+            </b-field>
+        </div>
+        <template v-else>
+            <slot/>
+        </template>
+        <p
+            v-if="hasMessage && !horizontal"
+            class="help"
+            :class="newType"
+        >
+            <slot v-if="$slots.message" name="message"/>
+            <template v-else>
+                <template v-for="(mess, i) in formattedMessage">
+                    {{ mess }}
+                    <br :key="i" v-if="(i + 1) < formattedMessage.length">
+                </template>
+            </template>
+        </p>
+    </div>
+</template>
+
+<script>
+import config from '../../utils/config'
+import FieldBody from './FieldBody'
+
+export default {
+    name: 'BField',
+    components: {
+        [FieldBody.name]: FieldBody
+    },
+    provide() {
+        return {
+            'BField': this
+        }
+    },
+    inject: {
+        parent: {
+            from: 'BField',
+            default: false
+        }
+    }, // Used internally only when using Field in Field
+    props: {
+        type: [String, Object],
+        label: String,
+        labelFor: String,
+        message: [String, Array, Object],
+        grouped: Boolean,
+        groupMultiline: Boolean,
+        position: String,
+        expanded: Boolean,
+        horizontal: Boolean,
+        addons: {
+            type: Boolean,
+            default: true
+        },
+        customClass: String,
+        labelPosition: {
+            type: String,
+            default: () => { return config.defaultFieldLabelPosition }
+        }
+    },
+    data() {
+        return {
+            newType: this.type,
+            newMessage: this.message,
+            fieldLabelSize: null,
+            _isField: true // Used internally by Input and Select
+        }
+    },
+    computed: {
+        rootClasses() {
+            return [{
+                'is-expanded': this.expanded,
+                'is-horizontal': this.horizontal,
+                'is-floating-in-label': this.hasLabel && !this.horizontal &&
+                    this.labelPosition === 'inside',
+                'is-floating-label': this.hasLabel && !this.horizontal &&
+                    this.labelPosition === 'on-border'
+            },
+            this.numberInputClasses]
+        },
+        innerFieldClasses() {
+            return [
+                this.fieldType(),
+                this.newPosition,
+                {
+                    'is-grouped-multiline': this.groupMultiline
+                }
+            ]
+        },
+        hasInnerField() {
+            return this.grouped || this.groupMultiline || this.hasAddons()
+        },
+        /**
+        * Correct Bulma class for the side of the addon or group.
+        *
+        * This is not kept like the others (is-small, etc.),
+        * because since 'has-addons' is set automatically it
+        * doesn't make sense to teach users what addons are exactly.
+        */
+        newPosition() {
+            if (this.position === undefined) return
+
+            const position = this.position.split('-')
+            if (position.length < 1) return
+
+            const prefix = this.grouped
+                ? 'is-grouped-'
+                : 'has-addons-'
+
+            if (this.position) return prefix + position[1]
+        },
+        /**
+        * Formatted message in case it's an array
+        * (each element is separated by <br> tag)
+        */
+        formattedMessage() {
+            if (this.parent && this.parent.hasInnerField) {
+                return '' // Message will be displayed in parent field
+            }
+            if (typeof this.newMessage === 'string') {
+                return [this.newMessage]
+            }
+            let messages = []
+            if (Array.isArray(this.newMessage)) {
+                this.newMessage.forEach((message) => {
+                    if (typeof message === 'string') {
+                        messages.push(message)
+                    } else {
+                        for (let key in message) {
+                            if (message[key]) {
+                                messages.push(key)
+                            }
+                        }
+                    }
+                })
+            } else {
+                for (let key in this.newMessage) {
+                    if (this.newMessage[key]) {
+                        messages.push(key)
+                    }
+                }
+            }
+            return messages.filter((m) => { if (m) return m })
+        },
+        hasLabel() {
+            return this.label || this.$slots.label
+        },
+        hasMessage() {
+            return ((!this.parent || !this.parent.hasInnerField) && this.newMessage) ||
+                this.$slots.message
+        },
+        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: {
+        /**
+        * Set internal type when prop change.
+        */
+        type(value) {
+            this.newType = value
+        },
+
+        /**
+        * Set internal message when prop change.
+        */
+        message(value) {
+            this.newMessage = value
+        },
+
+        /**
+        * Set parent message if we use Field in Field.
+        */
+        newMessage(value) {
+            if (this.parent && this.parent.hasInnerField) {
+                if (!this.parent.type) {
+                    this.parent.newType = this.newType
+                }
+                if (!this.parent.message) {
+                    this.parent.newMessage = value
+                }
+            }
+        }
+    },
+    methods: {
+        /**
+        * Field has addons if there are more than one slot
+        * (element / component) in the Field.
+        * Or is grouped when prop is set.
+        * Is a method to be called when component re-render.
+        */
+        fieldType() {
+            if (this.grouped) return 'is-grouped'
+            if (this.hasAddons()) return 'has-addons'
+        },
+        hasAddons() {
+            let renderedNode = 0
+            if (this.$slots.default) {
+                renderedNode = this.$slots.default.reduce((i, node) => node.tag ? i + 1 : i, 0)
+            }
+            return (
+                renderedNode > 1 &&
+                this.addons &&
+                !this.horizontal
+            )
+        }
+    },
+    mounted() {
+        if (this.horizontal) {
+            // Bulma docs: .is-normal for any .input or .button
+            const elements = this.$el.querySelectorAll('.input, .select, .button, .textarea, .b-slider')
+            if (elements.length > 0) {
+                this.fieldLabelSize = 'is-normal'
+            }
+        }
+    }
+}
+
+</script>

package/src/components/navbar/NavbarDropdown.vue

@@ -74,6 +74,10 @@ export default {
     watch: {
         active(value) {
             this.newActive = value
+        },
+
+        newActive(value) {
+            this.$emit('active-change', value)
         }
     },
     methods: {

package/src/components/snackbar/index.js

@@ -17,7 +17,8 @@ const SnackbarProgrammatic = {
 
         const defaultParam = {
             type: 'is-success',
-            position: config.defaultSnackbarPosition || 'is-bottom-right'
+            position: config.defaultSnackbarPosition || 'is-bottom-right',
+            queue: true
         }
         if (params.parent) {
             parent = params.parent

package/src/components/table/Table.spec.js

@@ -148,7 +148,7 @@ describe('BTable', () => {
     describe('Searchable', () => {
         const data = [
             { id: 1, name: 'Jesse' },
-            { id: 2, name: 'John' },
+            { id: 2, name: 'João' },
             { id: 3, name: 'Tina' },
             { id: 4, name: 'Anne' },
             { id: 5, name: 'Clarence' }
@@ -191,7 +191,21 @@ describe('BTable', () => {
             searchInput.vm.$emit('input', 'J')
             bodyRows = wrapper.findAll('tbody tr')
 
-            expect(bodyRows).toHaveLength(2) // Jesse and John
+            expect(bodyRows).toHaveLength(2) // Jesse and João
+        })
+
+        it('displays filtered data when searching by name without accent', () => {
+            searchInput.vm.$emit('input', 'Joao')
+            bodyRows = wrapper.findAll('tbody tr')
+
+            expect(bodyRows).toHaveLength(1) // João
+        })
+
+        it('displays filtered data when searching by name with accent', () => {
+            searchInput.vm.$emit('input', 'João')
+            bodyRows = wrapper.findAll('tbody tr')
+
+            expect(bodyRows).toHaveLength(1) // João
         })
 
         it('displays filtered data when searching and updating data', () => {
@@ -204,7 +218,7 @@ describe('BTable', () => {
             })
             bodyRows = wrapper.findAll('tbody tr')
 
-            expect(bodyRows).toHaveLength(3) // Jesse, John and Justin
+            expect(bodyRows).toHaveLength(3) // Jesse, João and Justin
         })
 
         it('debounce search filtering when debounce-search is defined', () => {

package/src/components/table/Table.vue

@@ -372,7 +372,7 @@
 </template>
 
 <script>
-import { getValueByPath, indexOf, multiColumnSort, escapeRegExpChars, toCssWidth } from '../../utils/helpers'
+import { getValueByPath, indexOf, multiColumnSort, escapeRegExpChars, toCssWidth, removeDiacriticsFromString, isNil } from '../../utils/helpers'
 import debounce from '../../utils/debounce'
 import { VueInstance } from '../../utils/config'
 import Checkbox from '../checkbox/Checkbox'
@@ -908,8 +908,10 @@ export default {
                         return isAsc ? newA - newB : newB - newA
                     }
 
-                    if (!newA && newA !== 0) return 1
-                    if (!newB && newB !== 0) return -1
+                    // sort null values to the bottom when in asc order
+                    // and to the top when in desc order
+                    if (!isNil(newB) && isNil(newA)) return isAsc ? 1 : -1
+                    if (!isNil(newA) && isNil(newB)) return isAsc ? -1 : 1
                     if (newA === newB) return 0
 
                     newA = (typeof newA === 'string')
@@ -1157,11 +1159,7 @@ export default {
 
         isRowFiltered(row) {
             for (const key in this.filters) {
-                // remove key if empty
-                if (!this.filters[key]) {
-                    delete this.filters[key]
-                    return true
-                }
+                if (!this.filters[key]) continue
                 const input = this.filters[key]
                 const column = this.newColumns.filter((c) => c.field === key)[0]
                 if (column && column.customSearch && typeof column.customSearch === 'function') {
@@ -1173,7 +1171,8 @@ export default {
                         if (value !== Number(input)) return false
                     } else {
                         const re = new RegExp(escapeRegExpChars(input), 'i')
-                        if (!re.test(value)) return false
+                        const valueWithoutDiacritics = removeDiacriticsFromString(value)
+                        return re.test(valueWithoutDiacritics) || re.test(value)
                     }
                 }
             }