buefy 0.9.13 → 0.9.17

package/src/components/table/TablePagination.vue

@@ -18,7 +18,11 @@
                     :aria-next-label="ariaNextLabel"
                     :aria-previous-label="ariaPreviousLabel"
                     :aria-page-label="ariaPageLabel"
-                    :aria-current-label="ariaCurrentLabel" />
+                    :aria-current-label="ariaCurrentLabel"
+                    :page-input="pageInput"
+                    :order="paginationOrder"
+                    :page-input-position="pageInputPosition"
+                    :debounce-page-input="debouncePageInput"/>
             </div>
         </div>
     </div>
@@ -44,7 +48,11 @@ export default {
         ariaNextLabel: String,
         ariaPreviousLabel: String,
         ariaPageLabel: String,
-        ariaCurrentLabel: String
+        ariaCurrentLabel: String,
+        pageInput: Boolean,
+        paginationOrder: String,
+        pageInputPosition: String,
+        debouncePageInput: [Number, String]
     },
     data() {
         return {

package/src/components/tabs/Tabs.vue

@@ -7,6 +7,7 @@
             :aria-orientation="vertical ? 'vertical' : 'horizontal'"
             @keydown="manageTablistKeydown"
         >
+            <slot name="start" />
             <ul>
                 <li
                     v-for="(childItem, childIdx) in items"
@@ -52,6 +53,7 @@
                     </a>
                 </li>
             </ul>
+            <slot name="end" />
         </nav>
         <section class="tab-content" :class="{'is-transitioning': isTransitioning}">
             <slot/>

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/tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-    <span ref="tooltip" :class="rootClasses">
+    <div ref="tooltip" :class="rootClasses">
         <transition :name="newAnimation">
             <div
                 v-show="active && (isActive || always)"
@@ -23,7 +23,7 @@
             @mouseleave="close">
             <slot ref="slot" />
         </div>
-    </span>
+    </div>
 </template>
 
 <script>

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/scss/buefy.scss

@@ -5,6 +5,7 @@
 @import "components/_checkbox";
 @import "components/_clockpicker";
 @import "components/_collapse";
+@import "components/colorpicker";
 @import "components/_datepicker";
 @import "components/_dialog";
 @import "components/_dropdown";

package/src/scss/components/_colorpicker.scss

@@ -0,0 +1,283 @@
+$colorpicker-radius: $dropdown-content-radius !default;
+$colorpicker-hue-selected-stroke: $primary !default;
+
+.colorpicker {
+    .color-name {
+        font-family: $family-monospace;
+        text-transform: uppercase;
+    }
+    .colorpicker-footer {
+        margin-top: .875rem;
+        padding-top: .875rem;
+        border: 1px solid #dbdbdb;
+        border-width: 1px 0 0 0;
+
+        .colorpicker-fields {
+            margin-bottom: .875rem;
+
+            .field {
+                flex-grow: 1;
+
+                .field-label {
+                    margin-right: .5rem;
+                }
+                .control {
+                    display: flex;
+                    .input {
+                        -webkit-appearance: none;
+                        -moz-appearance: textfield;
+                        appearance: textfield;
+                        flex-grow: 1;
+                        width: 0;
+                        min-width: 42px;
+                        text-align: right;
+
+                        &::-webkit-outer-spin-button,
+                        &::-webkit-inner-spin-button {
+                            -webkit-appearance: none;
+                            margin: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .dropdown.is-expanded .dropdown-menu,
+    .dropdown.is-expanded.is-mobile-modal .dropdown-menu {
+        width: unset;
+    }
+    .dropdown-horizonal-colorpicker {
+        display: flex;
+        flex-direction: row;
+
+        .colorpicker-footer {
+            border-width: 0 0 0 1px;
+            margin-top: 0;
+            padding-top: 0;
+            margin-left: .875rem;
+            padding-left: .875rem;
+        }
+    }
+}
+
+svg.b-colorpicker-triangle {
+    width: 200px;
+    height: 200px;
+    user-select: none;
+
+    @media (max-width: $tablet) {
+        width: 100%;
+        height: auto;
+    }
+
+    .colorpicker-triangle-hue {
+        width: 100%;
+        height: 100%;
+        background:
+            conic-gradient(
+                #f00,
+                #ff0,
+                #0f0,
+                #0ff,
+                #00f,
+                #f0f,
+                #f00
+            );
+    }
+
+    .colorpicker-triangle-slider {
+        &-hue,
+        &-sl {
+            &,
+            & foreignObject,
+            & g {
+                transform-origin: 50% 50%;
+            }
+        }
+    }
+
+    .hue-range-thumb,
+    .sl-range-thumb {
+        background: transparent;
+        border-radius: $colorpicker-radius;
+        box-shadow:
+            inset 0 0 0 1px #fff,
+            0 0 0 1px #dbdbdb;
+        cursor: grab;
+        height: calc(100%/1 - .25em/1);
+        width: calc(100%/1 - .25em/1);
+        margin: .125em;
+
+        &:hover {
+            box-shadow:
+                inset 0 0 0 1px #fff,
+                0 0 0 1px #b5b5b5;
+        }
+        &:focus {
+            box-shadow:
+                inset 0 0 0 1px #fff,
+                0 0 0 1px $colorpicker-hue-selected-stroke,
+                0 0 0 .125em rgba($colorpicker-hue-selected-stroke, .25);
+        }
+        &:active {
+            cursor: grabbing;
+        }
+    }
+}
+
+div.b-colorpicker-square {
+    position: relative;
+    aspect-ratio: 1/1;
+    user-select: none;
+
+    .colorpicker-square-slider-hue {
+        background:
+            conic-gradient(
+                #f00,
+                #ff0,
+                #0f0,
+                #0ff,
+                #00f,
+                #f0f,
+                #f00
+            );
+        border-radius: $colorpicker-radius;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        .hue-range-thumb {
+            border-radius: calc(#{$colorpicker-radius} / 1.75);
+            position: absolute;
+            aspect-ratio: 1 / 1;
+            transform: translate(-50%, -50%);
+            box-shadow:
+                inset 0 0 0 1px #fff,
+                0 0 0 1px #dbdbdb;
+            cursor: grab;
+
+            &:hover {
+                box-shadow:
+                    inset 0 0 0 1px #fff,
+                    inset 0 0 0 2px #b5b5b5,
+                    0 0 0 1px #b5b5b5;
+            }
+            &:focus {
+                box-shadow:
+                    inset 0 0 0 1px #fff,
+                    0 0 0 1px $colorpicker-hue-selected-stroke,
+                    0 0 0 .125em rgba($colorpicker-hue-selected-stroke, .25);
+            }
+            &:active {
+                cursor: grabbing;
+            }
+        }
+    }
+    .colorpicker-square-slider-sl {
+        background: #fff;
+        border-radius: $colorpicker-radius*0.5;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        &::before {
+            content: '';
+            background: linear-gradient(0deg, #000, #fff);
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            mix-blend-mode: hard-light;
+        }
+
+        .sl-range-thumb {
+            display: block;
+            border-radius: $colorpicker-radius;
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            transform: translate(-50%, -50%);
+            box-shadow:
+                inset 0 0 0 1px #fff,
+                0 0 0 1px #dbdbdb;
+            cursor: grab;
+
+            &:hover {
+                box-shadow:
+                    inset 0 0 0 1px #fff,
+                    inset 0 0 0 2px #b5b5b5,
+                    0 0 0 1px #b5b5b5;
+            }
+            &:focus {
+                box-shadow:
+                    inset 0 0 0 1px #fff,
+                    0 0 0 1px $colorpicker-hue-selected-stroke,
+                    0 0 0 .125em rgba($colorpicker-hue-selected-stroke, .25);
+            }
+            &:active {
+                cursor: grabbing;
+            }
+        }
+    }
+}
+
+.b-colorpicker-alpha-slider {
+    height: 1em;
+    background-image:
+        linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7),
+        linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7);
+    background-size: 1em 1em;
+    background-position: .5em .5em, 0 0;
+    border-radius: $colorpicker-radius;
+    margin-top: .125em;
+    margin-bottom: .875rem;
+    position: relative;
+
+    .alpha-range-thumb {
+        width: .4em;
+        height: 1.25em;
+        border-radius: $colorpicker-radius;
+        box-shadow:
+            inset 0 0 0 1px #fff,
+            inset 0 0 0 2px #dbdbdb,
+            0 0 0 1px #dbdbdb;
+        cursor: grab;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translate(-50%, -50%);
+
+        &:hover {
+            box-shadow:
+                inset 0 0 0 1px #fff,
+                inset 0 0 0 2px #b5b5b5,
+                0 0 0 1px #b5b5b5;
+        }
+        &:focus {
+            box-shadow:
+                inset 0 0 0 1px #fff,
+                0 0 0 1px $colorpicker-hue-selected-stroke,
+                0 0 0 .125em rgba($colorpicker-hue-selected-stroke, .25);
+        }
+        &:active {
+            cursor: grabbing;
+        }
+
+        & > .b-tooltip {
+            &,
+            &> .tooltip-trigger {
+                position: absolute;
+                display: block;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+            }
+        }
+    }
+}

package/src/scss/components/_pagination.scss

@@ -1,3 +1,11 @@
+@mixin paginationPositions($classes...) {
+    @for $i from 0 to length($classes) {
+       #{nth($classes, $i + 1)} {
+            order: $i + 1;
+        }
+    }
+}
+
 .pagination {
     .pagination-next,
     .pagination-previous {
@@ -23,3 +31,33 @@
         cursor: not-allowed;
     }
 }
+
+@include tablet {
+    .pagination.has-input {
+        @include paginationPositions(".pagination-list", ".pagination-input", ".pagination-previous", ".pagination-next");
+        &.is-centered {
+            @include paginationPositions(".pagination-previous", ".pagination-list", ".pagination-input", ".pagination-next");
+            &.is-input-right {
+                @include paginationPositions(".pagination-previous", ".pagination-list", ".pagination-next", ".pagination-input");
+            }
+            &.is-input-left {
+                @include paginationPositions(".pagination-input", ".pagination-previous", ".pagination-list", ".pagination-next");
+            }
+        }
+        &.is-right {
+            @include paginationPositions(".pagination-previous", ".pagination-next", ".pagination-input", ".pagination-list");
+            &.is-input-right {
+                @include paginationPositions(".pagination-previous", ".pagination-next", ".pagination-list", ".pagination-input");
+            }
+            &.is-input-left {
+                @include paginationPositions(".pagination-input", ".pagination-previous", ".pagination-next", ".pagination-list");
+            }
+        }
+        &.is-input-right {
+            @include paginationPositions(".pagination-list", ".pagination-previous", ".pagination-next", ".pagination-input");
+        }
+        &.is-input-left {
+            @include paginationPositions(".pagination-input", ".pagination-list", ".pagination-previous", ".pagination-next");
+        }
+    }
+}

package/src/utils/MessageMixin.js

@@ -42,7 +42,8 @@ export default {
     data() {
         return {
             isActive: this.active,
-            remainingTime: this.duration / 1000 // in seconds
+            remainingTime: this.duration / 1000, // in seconds
+            newIconSize: this.iconSize || this.size || 'is-large'
         }
     },
     watch: {

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