buefy 0.9.13 → 0.9.17

package/src/components/numberinput/Numberinput.vue

@@ -160,7 +160,8 @@ export default {
                 return this.newValue
             },
             set(value) {
-                let newValue = Number(value) || null
+                // Parses the number, so that "0" => 0, and "invalid" => null
+                let newValue = (Number(value) === 0) ? 0 : (Number(value) || null)
                 if (value === '' || value === undefined || value === null) {
                     if (this.minNumber !== undefined) {
                         newValue = this.minNumber
@@ -210,9 +211,15 @@ export default {
             return typeof this.max === 'string' ? parseFloat(this.max) : this.max
         },
         stepNumber() {
+            if (this.newStep === 'any') {
+                return 1
+            }
             return typeof this.newStep === 'string' ? parseFloat(this.newStep) : this.newStep
         },
         minStepNumber() {
+            if (this.newStep === 'any' && typeof this.newMinStep === 'undefined') {
+                return 'any'
+            }
             const step = typeof this.newMinStep !== 'undefined' ? this.newMinStep : this.newStep
             return typeof step === 'string' ? parseFloat(step) : step
         },
@@ -254,27 +261,27 @@ export default {
             return this.disabled || (control === 'plus' ? this.disabledMax : this.disabledMin)
         },
         decrement() {
-            if (typeof this.minNumber === 'undefined' || this.computedValue - this.stepNumber >= this.minNumber) {
-                if (this.computedValue === null || typeof this.computedValue === 'undefined') {
-                    if (this.maxNumber) {
-                        this.computedValue = this.maxNumber
-                        return
-                    }
-                    this.computedValue = 0
+            if (this.computedValue === null || typeof this.computedValue === 'undefined') {
+                if (this.maxNumber !== null && typeof this.maxNumber !== 'undefined') {
+                    this.computedValue = this.maxNumber
+                    return
                 }
+                this.computedValue = 0
+            }
+            if (typeof this.minNumber === 'undefined' || (this.computedValue - this.stepNumber) >= this.minNumber) {
                 const value = this.computedValue - this.stepNumber
                 this.computedValue = parseFloat(value.toFixed(this.stepDecimals))
             }
         },
         increment() {
-            if (typeof this.maxNumber === 'undefined' || this.computedValue + this.stepNumber <= this.maxNumber) {
-                if (this.computedValue === null || typeof this.computedValue === 'undefined') {
-                    if (this.minNumber) {
-                        this.computedValue = this.minNumber
-                        return
-                    }
-                    this.computedValue = 0
+            if (this.computedValue === null || typeof this.computedValue === 'undefined') {
+                if (this.minNumber !== null && typeof this.minNumber !== 'undefined') {
+                    this.computedValue = this.minNumber
+                    return
                 }
+                this.computedValue = 0
+            }
+            if (typeof this.maxNumber === 'undefined' || (this.computedValue + this.stepNumber) <= this.maxNumber) {
                 const value = this.computedValue + this.stepNumber
                 this.computedValue = parseFloat(value.toFixed(this.stepDecimals))
             }

package/src/components/pagination/Pagination.vue

@@ -3,60 +3,78 @@
         <slot
             v-if="$scopedSlots.previous"
             name="previous"
-            :page="getPage(current - 1, {
-                disabled: !hasPrev,
-                class: 'pagination-previous',
-                'aria-label': ariaPreviousLabel
-        })">
+            :page="
+                getPage(current - 1, {
+                    disabled: !hasPrev,
+                    class: 'pagination-previous',
+                    'aria-label': ariaPreviousLabel,
+                })
+            "
+        >
             <b-icon
                 :icon="iconPrev"
                 :pack="iconPack"
                 both
-                aria-hidden="true"/>
+                aria-hidden="true" />
         </slot>
         <BPaginationButton
             v-else
             class="pagination-previous"
             :disabled="!hasPrev"
             :page="getPage(current - 1)"
-            :aria-label="ariaPreviousLabel">
+            :aria-label="ariaPreviousLabel"
+        >
             <b-icon
                 :icon="iconPrev"
                 :pack="iconPack"
                 both
-                aria-hidden="true"/>
+                aria-hidden="true" />
         </BPaginationButton>
         <slot
             v-if="$scopedSlots.next"
             name="next"
-            :page="getPage(current + 1, {
-                disabled: !hasNext,
-                class: 'pagination-next',
-                'aria-label': ariaNextLabel
-        })">
+            :page="
+                getPage(current + 1, {
+                    disabled: !hasNext,
+                    class: 'pagination-next',
+                    'aria-label': ariaNextLabel,
+                })
+            "
+        >
             <b-icon
                 :icon="iconNext"
                 :pack="iconPack"
                 both
-                aria-hidden="true"/>
+                aria-hidden="true" />
         </slot>
         <BPaginationButton
             v-else
             class="pagination-next"
             :disabled="!hasNext"
             :page="getPage(current + 1)"
-            :aria-label="ariaNextLabel">
+            :aria-label="ariaNextLabel"
+        >
             <b-icon
                 :icon="iconNext"
                 :pack="iconPack"
                 both
-                aria-hidden="true"/>
+                aria-hidden="true" />
         </BPaginationButton>
 
+        <div class="control pagination-input">
+            <input
+                v-if="pageInput"
+                class="input"
+                :value="inputValue"
+                @input="handleAllowableInputPageRange"
+                @keypress="handleOnKeyPress"
+                :size="pageCount.toString().length"
+                :maxlength="pageCount.toString().length"
+            >
+        </div>
+
         <small class="info" v-if="simple">
-            <template v-if="perPage == 1">
-                {{ firstItem }} / {{ total }}
-            </template>
+            <template v-if="perPage == 1"> {{ firstItem }} / {{ total }} </template>
             <template v-else>
                 {{ firstItem }}-{{ Math.min(current * perPage, total) }} / {{ total }}
             </template>
@@ -64,37 +82,26 @@
         <ul class="pagination-list" v-else>
             <!--First-->
             <li v-if="hasFirst">
-                <slot
-                    v-if="$scopedSlots.default"
-                    :page="getPage(1)"
-                />
-                <BPaginationButton
-                    v-else
-                    :page="getPage(1)" />
+                <slot v-if="$scopedSlots.default" :page="getPage(1)" />
+                <BPaginationButton v-else :page="getPage(1)" />
+            </li>
+            <li v-if="hasFirstEllipsis">
+                <span class="pagination-ellipsis">&hellip;</span>
             </li>
-            <li v-if="hasFirstEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
 
             <!--Pages-->
             <li v-for="page in pagesInRange" :key="page.number">
-                <slot
-                    v-if="$scopedSlots.default"
-                    :page="page"
-                />
-                <BPaginationButton
-                    v-else
-                    :page="page" />
+                <slot v-if="$scopedSlots.default" :page="page" />
+                <BPaginationButton v-else :page="page" />
             </li>
 
             <!--Last-->
-            <li v-if="hasLastEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
+            <li v-if="hasLastEllipsis">
+                <span class="pagination-ellipsis">&hellip;</span>
+            </li>
             <li v-if="hasLast">
-                <slot
-                    v-if="$scopedSlots.default"
-                    :page="getPage(pageCount)"
-                />
-                <BPaginationButton
-                    v-else
-                    :page="getPage(pageCount)" />
+                <slot v-if="$scopedSlots.default" :page="getPage(pageCount)" />
+                <BPaginationButton v-else :page="getPage(pageCount)" />
             </li>
         </ul>
     </nav>
@@ -104,6 +111,7 @@
 import PaginationButton from './PaginationButton'
 import Icon from '../icon/Icon'
 import config from '../../utils/config'
+import debounce from '../../utils/debounce'
 
 export default {
     name: 'BPagination',
@@ -154,16 +162,29 @@ export default {
         ariaNextLabel: String,
         ariaPreviousLabel: String,
         ariaPageLabel: String,
-        ariaCurrentLabel: String
+        ariaCurrentLabel: String,
+        pageInput: {
+            type: Boolean,
+            default: false
+        },
+        pageInputPosition: String,
+        debouncePageInput: [Number, String]
+    },
+    data() {
+        return {
+            inputValue: this.current
+        }
     },
     computed: {
         rootClasses() {
             return [
                 this.order,
                 this.size,
+                this.pageInputPosition,
                 {
                     'is-simple': this.simple,
-                    'is-rounded': this.rounded
+                    'is-rounded': this.rounded,
+                    'has-input': this.pageInput
                 }
             ]
         },
@@ -199,17 +220,17 @@ export default {
         },
 
         /**
-        * Check if first page button should be visible.
+         * Check if first page button should be visible.
         */
         hasFirst() {
-            return this.current >= (2 + this.beforeCurrent)
+            return this.current >= 2 + this.beforeCurrent
         },
 
         /**
         * Check if first ellipsis should be visible.
         */
         hasFirstEllipsis() {
-            return this.current >= (this.beforeCurrent + 4)
+            return this.current >= this.beforeCurrent + 4
         },
 
         /**
@@ -262,6 +283,20 @@ export default {
         */
         pageCount(value) {
             if (this.current > value) this.last()
+        },
+
+        current(value) {
+            this.inputValue = value
+        },
+
+        debouncePageInput: {
+            handler(value) {
+                this.debounceHandlePageInput = debounce(
+                    this.handleOnInputPageChange,
+                    value
+                )
+            },
+            immediate: true
         }
     },
     methods: {
@@ -272,13 +307,13 @@ export default {
             this.changePage(this.current - 1, event)
         },
         /**
-        * Next button click listener.
+         * Next button click listener.
         */
         next(event) {
             this.changePage(this.current + 1, event)
         },
         /**
-        * First button click listener.
+         * First button click listener.
         */
         first(event) {
             this.changePage(1, event)
@@ -292,6 +327,7 @@ export default {
 
         changePage(num, event) {
             if (this.current === num || num < 1 || num > this.pageCount) return
+
             this.$emit('update:current', num)
             this.$emit('change', num)
 
@@ -306,9 +342,12 @@ export default {
                 number: num,
                 isCurrent: this.current === num,
                 click: (event) => this.changePage(num, event),
+                input: (event, inputNum) => this.changePage(+inputNum, event),
                 disabled: options.disabled || false,
                 class: options.class || '',
-                'aria-label': options['aria-label'] || this.getAriaPageLabel(num, this.current === num)
+                'aria-label':
+          options['aria-label'] ||
+          this.getAriaPageLabel(num, this.current === num)
             }
         },
 
@@ -319,9 +358,60 @@ export default {
             if (this.ariaPageLabel && (!isCurrent || !this.ariaCurrentLabel)) {
                 return this.ariaPageLabel + ' ' + pageNumber + '.'
             } else if (this.ariaPageLabel && isCurrent && this.ariaCurrentLabel) {
-                return this.ariaCurrentLabel + ', ' + this.ariaPageLabel + ' ' + pageNumber + '.'
+                return (
+                    this.ariaCurrentLabel +
+          ', ' +
+          this.ariaPageLabel +
+          ' ' +
+          pageNumber +
+          '.'
+                )
             }
             return null
+        },
+
+        handleOnInputPageChange(event) {
+            this.getPage(this.inputValue).input(event, this.inputValue)
+        },
+
+        handleOnInputDebounce(event) {
+            if (this.debouncePageInput) {
+                this.debounceHandlePageInput(event)
+            } else {
+                this.handleOnInputPageChange(event)
+            }
+        },
+        handleOnKeyPress(event) {
+            // --- This is required to only allow numeric inputs for the page input - --- //
+            // --- size attribute does not work with input type number. --- //
+            let ASCIICode = event.which || event.keyCode
+
+            if (ASCIICode >= 48 && ASCIICode <= 57) {
+                return true
+            } else {
+                return event.preventDefault()
+            }
+        },
+        handleAllowableInputPageRange(event) {
+            if (+event.target.value > 0 && +event.target.value <= this.pageCount) {
+                this.handleOnInputValue(event)
+            } else {
+                // --- It is nessacery to set inputValue to 1 and then to '' so that the DOM- --- //
+                // --- will update the input component even when Backspace is used and then-
+                // --- 0 us entered. --- //
+                this.inputValue = 1
+                this.inputValue = ''
+            }
+        },
+        handleOnInputValue(event) {
+            let inputValue = +event.target.value
+            this.inputValue = inputValue
+            if (Number.isInteger(this.inputValue)) {
+                this.handleOnInputDebounce(event)
+            } else {
+                // --- if NaN, then set inputValue back to current --- //
+                this.inputValue = this.current
+            }
         }
     }
 }

package/src/components/progress/Progress.vue

@@ -90,7 +90,7 @@ export default {
         wrapperClasses() {
             return {
                 'is-not-native': !this.isNative,
-                [this.size]: !this.isNative
+                [this.size]: typeof this.size === 'string' && !this.isNative
             }
         }
     },

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', () => {