buefy 0.7.9 → 0.8.2

package/src/components/table/Table.vue

@@ -69,20 +69,30 @@
                                     'is-numeric': column.numeric,
                                     'is-centered': column.centered
                             }">
-                                <slot
-                                    v-if="$scopedSlots.header"
-                                    name="header"
-                                    :column="column"
-                                    :index="index"
-                                />
+                                <template v-if="column.$scopedSlots && column.$scopedSlots.header">
+                                    <b-slot-component
+                                        :component="column"
+                                        :scoped="true"
+                                        name="header"
+                                        tag="span"
+                                        :props="{ column, index }"
+                                    />
+                                </template>
+                                <template v-else-if="$scopedSlots.header">
+                                    <slot
+                                        name="header"
+                                        :column="column"
+                                        :index="index"
+                                    />
+                                </template>
                                 <template v-else>{{ column.label }}</template>
 
                                 <b-icon
                                     v-show="currentSortColumn === column"
-                                    icon="arrow-up"
+                                    :icon="sortIcon"
                                     :pack="iconPack"
                                     both
-                                    size="is-small"
+                                    :size="sortIconSize"
                                     :class="{ 'is-desc': !isAsc }"/>
                             </div>
                         </th>
@@ -106,6 +116,8 @@
                             }]"
                             @click="selectRow(row)"
                             @dblclick="$emit('dblclick', row)"
+                            @mouseenter="$emit('mouseenter', row)"
+                            @mouseleave="$emit('mouseleave', row)"
                             @contextmenu="$emit('contextmenu', row, $event)"
                             :draggable="draggable"
                             @dragstart="handleDragStart($event, row, index)"
@@ -247,6 +259,7 @@ import { getValueByPath, indexOf } from '../../utils/helpers'
 import Checkbox from '../checkbox/Checkbox'
 import Icon from '../icon/Icon'
 import Pagination from '../pagination/Pagination'
+import SlotComponent from '../../utils/SlotComponent'
 
 import TableMobileSort from './TableMobileSort'
 import TableColumn from './TableColumn'
@@ -257,6 +270,7 @@ export default {
         [Checkbox.name]: Checkbox,
         [Icon.name]: Icon,
         [Pagination.name]: Pagination,
+        [SlotComponent.name]: SlotComponent,
         [TableMobileSort.name]: TableMobileSort,
         [TableColumn.name]: TableColumn
     },
@@ -310,6 +324,14 @@ export default {
             type: String,
             default: 'asc'
         },
+        sortIcon: {
+            type: String,
+            default: 'arrow-up'
+        },
+        sortIconSize: {
+            type: String,
+            default: 'is-small'
+        },
         paginated: Boolean,
         currentPage: {
             type: Number,

package/src/components/table/TableColumn.vue

@@ -3,7 +3,7 @@
         v-if="visible"
         :class="rootClasses"
         :data-label="label">
-        <span><slot/></span>
+        <slot/>
     </td>
 </template>
 
@@ -14,7 +14,7 @@ export default {
         label: String,
         customKey: [String, Number],
         field: String,
-        meta: [String, Number, Boolean, Function, Object, Array, Symbol],
+        meta: [String, Number, Boolean, Function, Object, Array],
         width: [Number, String],
         numeric: Boolean,
         centered: Boolean,

package/src/components/tag/Tag.vue

@@ -10,6 +10,7 @@
         <a
             class="tag is-delete"
             role="button"
+            :aria-label="ariaCloseLabel"
             :tabindex="tabstop ? 0 : false"
             :disabled="disabled"
             :class="[size, { 'is-rounded': rounded }]"
@@ -28,6 +29,7 @@
         <a
             v-if="closable"
             role="button"
+            :aria-label="ariaCloseLabel"
             class="delete is-small"
             :disabled="disabled"
             :tabindex="tabstop ? 0 : false"
@@ -51,7 +53,8 @@ export default {
         tabstop: {
             type: Boolean,
             default: true
-        }
+        },
+        ariaCloseLabel: String
     },
     methods: {
         /**

package/src/components/taginput/Taginput.spec.js

@@ -9,3 +9,13 @@ describe('BTaginput', () => {
         expect(wrapper.isVueInstance()).toBeTruthy()
     })
 })
+
+it('no display counter when hasCounter property set for false', () => {
+    const wrapper = shallowMount(BTaginput, {
+        propsData: { maxlength: 100 }
+    })
+    expect(wrapper.find('small.counter').exists()).toBeTruthy()
+
+    wrapper.setProps({ hasCounter: false })
+    expect(wrapper.find('small.counter').exists()).toBeFalsy()
+})

package/src/components/taginput/Taginput.vue

@@ -62,14 +62,14 @@
             </b-autocomplete>
         </div>
 
-        <p v-if="maxtags || maxlength" class="help counter">
+        <small v-if="hasCounter && (maxtags || maxlength)" class="help counter">
             <template v-if="maxlength && valueLength > 0">
                 {{ valueLength }} / {{ maxlength }}
             </template>
             <template v-else-if="maxtags">
                 {{ tagsLength }} / {{ maxtags }}
             </template>
-        </p>
+        </small>
     </div>
 </template>
 
@@ -77,6 +77,7 @@
 import { getValueByPath } from '../../utils/helpers'
 import Tag from '../tag/Tag'
 import Autocomplete from '../autocomplete/Autocomplete'
+import config from '../../utils/config'
 import FormElementMixin from '../../utils/FormElementMixin'
 
 export default {
@@ -109,6 +110,10 @@ export default {
             type: [Number, String],
             required: false
         },
+        hasCounter: {
+            type: Boolean,
+            default: () => config.defaultTaginputHasCounter
+        },
         field: {
             type: String,
             default: 'value'
@@ -145,7 +150,7 @@ export default {
     },
     data() {
         return {
-            tags: this.value || [],
+            tags: Array.isArray(this.value) ? this.value.slice(0) : (this.value || []),
             newTag: '',
             _elementRef: 'input',
             _isTaginput: true

package/src/components/toast/index.js

@@ -32,7 +32,7 @@ const ToastProgrammatic = {
 
 const Plugin = {
     install(Vue) {
-        registerComponentProgrammatic(Vue, '$toast', ToastProgrammatic)
+        registerComponentProgrammatic(Vue, 'toast', ToastProgrammatic)
     }
 }
 
@@ -41,5 +41,5 @@ use(Plugin)
 export default Plugin
 
 export {
-    ToastProgrammatic as Toast
+    ToastProgrammatic
 }

package/src/components/tooltip/Tooltip.vue

@@ -9,7 +9,7 @@
             'is-multiline': multilined,
             'is-dashed': dashed
         }]"
-        :style="{'transition-delay': `${delay}ms`}">
+        :style="{'transition-delay': `${newDelay}ms`}">
         <slot/>
     </span>
 </template>
@@ -47,10 +47,7 @@ export default {
             type: String,
             default: 'is-medium'
         },
-        delay: {
-            type: Number,
-            default: 0
-        }
+        delay: Number
     },
     computed: {
         newType() {
@@ -58,6 +55,9 @@ export default {
         },
         newAnimated() {
             return this.animated || config.defaultTooltipAnimated
+        },
+        newDelay() {
+            return this.delay || config.defaultTooltipDelay
         }
     }
 }

package/src/components/upload/Upload.vue

@@ -22,7 +22,6 @@
         <input
             ref="input"
             type="file"
-            :class="{'file-draggable': dragDrop}"
             v-bind="$attrs"
             :multiple="multiple"
             :accept="accept"
@@ -65,15 +64,21 @@ export default {
     },
     watch: {
         /**
-        * When v-model is changed:
-        *   1. Set internal value.
-        *   2. Reset input value if array is empty
-        *   3. If it's invalid, validate again.
-        */
+         *   When v-model is changed:
+         *   1. Get value from input file
+         *   2. Set internal value.
+         *   3. Reset input value if array is empty or when input file is not found in newValue
+         *   4. If it's invalid, validate again.
+         */
         value(value) {
+            let inputFiles = this.$refs.input.files
             this.newValue = value
+
             if (!this.newValue ||
-            (Array.isArray(this.newValue) && this.newValue.length === 0)) {
+                (Array.isArray(this.newValue) && this.newValue.length === 0) ||
+                !inputFiles[0] ||
+                (Array.isArray(this.newValue) &&
+                    !this.newValue.some(function (a) { return a.name === inputFiles[0].name }))) {
                 this.$refs.input.value = null
             }
             !this.isValid && !this.dragDrop && this.checkHtml5Validity()
@@ -95,7 +100,9 @@ export default {
                 if (!this.newValue) {
                     return
                 }
-                this.newValue = null
+                if (this.native) {
+                    this.newValue = null
+                }
             } else if (!this.multiple) {
                 // only one element in case drag drop mode and isn't multiple
                 if (this.dragDrop && value.length !== 1) return

package/src/index.js

@@ -1,6 +1,3 @@
-
-import './scss/buefy-build.scss'
-
 import * as components from './components'
 
 import config, { setOptions } from './utils/config'
@@ -20,10 +17,20 @@ const Buefy = {
                 setOptions(Object.assign(config, options))
             }
         }
-        registerComponentProgrammatic(Vue, '$buefy', BuefyProgrammatic)
+        registerComponentProgrammatic(Vue, 'config', BuefyProgrammatic)
     }
 }
 
 use(Buefy)
 
 export default Buefy
+
+// export all components as vue plugin
+export * from './components'
+// export programmatic component
+export { DialogProgrammatic } from './components/dialog'
+export { LoadingProgrammatic } from './components/loading'
+export { ModalProgrammatic } from './components/modal'
+export { NotificationProgrammatic } from './components/notification'
+export { SnackbarProgrammatic } from './components/snackbar'
+export { ToastProgrammatic } from './components/toast'

package/src/scss/buefy-build.scss

@@ -1,4 +1,4 @@
-@import "~bulma/sass/utilities/initial-variables";
+@import "node_modules/bulma/sass/utilities/initial-variables";
 @import "utils/_all";
-@import "~bulma/bulma";
-@import "buefy";
+@import "node_modules/bulma/bulma";
+@import "buefy";

package/src/scss/buefy.scss

@@ -1,3 +1,5 @@
+@import "utils/_all";
+
 @import "components/_autocomplete";
 @import "components/_checkbox";
 @import "components/_clockpicker";
@@ -14,8 +16,10 @@
 @import "components/_notices";
 @import "components/_numberinput";
 @import "components/_pagination";
+@import "components/_progress";
 @import "components/_radio";
 @import "components/_select";
+@import "components/_slider";
 @import "components/_steps";
 @import "components/_switch";
 @import "components/_table";

package/src/scss/components/_datepicker.scss

@@ -13,7 +13,7 @@
         border-bottom: 1px solid $grey-lighter;
     }
     .datepicker-content {
-        height: 16.25rem;   
+        height: 16.25rem;
     }
     .datepicker-footer {
         margin-top: 0.875rem;
@@ -70,14 +70,53 @@
                         color: $black;
                         cursor: pointer;
                     }
+                    &.is-within-hovered-range {
+                        &.is-first-hovered {
+                            background-color: $grey;
+                            color: $grey-lighter;
+                            border-bottom-right-radius: 0;
+                            border-top-right-radius: 0;
+                        }
+                        &.is-within-hovered {
+                            background-color: $background;
+                            color: $black;
+                            border-radius: 0;
+                        }
+                        &.is-last-hovered {
+                            background-color: $grey;
+                            color: $grey-lighter;
+                            border-bottom-left-radius: 0;
+                            border-top-left-radius: 0;
+                        }
+                    }
                 }
                 &.is-selected {
                     background-color: $primary;
                     color: $primary-invert;
+
+                    &.is-first-selected {
+                        background-color: $primary;
+                        color: $primary-invert;
+                        border-bottom-right-radius: 0;
+                        border-top-right-radius: 0;
+                    }
+                    &.is-within-selected {
+                        background-color: rgba($primary, 0.5);
+                        border-radius: 0;
+                    }
+                    &.is-last-selected {
+                        background-color: $primary;
+                        color: $primary-invert;
+                        border-bottom-left-radius: 0;
+                        border-top-left-radius: 0;
+                    }
                 }
                 &.is-nearby:not(.is-selected) {
                     color: $grey-light;
                 }
+                &.is-week-number {
+                    cursor: default;
+                }
             }
             &.has-events {
                 .datepicker-cell {

package/src/scss/components/_form.scss

@@ -134,7 +134,7 @@ $floating-in-height: 3.25em;
                     margin-top: 1px;
                 }
             }
-        }     
+        }
         > :not(.taginput) {
             .is-left.icon,
             .is-right.icon {
@@ -151,6 +151,57 @@ $floating-in-height: 3.25em;
             // 0.275em - 1px _taginput.scss
             padding-top: calc(#{$floating-in-height} / 2 - (#{$size-large} * 3 / 4) / 2 + (0.275em - 1px));
         }
+        &.has-numberinput {
+            .b-numberinput {
+                .control {
+                    .button {
+                        height: $floating-in-height;
+                    }
+                }
+            }
+        }
+    }
+    &.is-floating-label, &.is-floating-in-label {
+        &.has-numberinput {
+            .label {
+                margin-left: calc(#{$size-normal} * 3);
+            }
+            &.has-numberinput-is-small {
+                .label {
+                    margin-left: calc(#{$size-small} * 3);
+                }
+            }
+            &.has-numberinput-is-medium {
+                .label {
+                    margin-left: calc(#{$size-medium} * 3);
+                }
+            }
+            &.has-numberinput-is-large {
+                .label {
+                    margin-left: calc(#{$size-large} * 3);
+                }
+            }
+        }
+        &.has-numberinput-compact {
+            .label {
+                margin-left: calc(#{$size-normal} * 2.25);
+            }
+            &.has-numberinput-is-small {
+                .label {
+                    margin-left: calc(#{$size-small} * 2.25);
+                }
+            }
+            &.has-numberinput-is-medium {
+                .label {
+                    margin-left: calc(#{$size-medium} * 2.25);
+                }
+            }
+            &.has-numberinput-is-large {
+                .label {
+                    margin-left: calc(#{$size-large} * 2.25);
+                }
+            }
+        }
     }
 }
 

package/src/scss/components/_progress.scss

@@ -0,0 +1,45 @@
+
+.progress-wrapper {
+    position: relative;
+
+    &:not(:last-child) {
+        margin-bottom: 1.5rem;
+    }
+
+    .progress-value {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: calc(1rem / 1.5);
+        line-height: 1rem;
+        font-weight: bold;
+    }
+
+    .progress {
+        margin-bottom: 0;
+
+        &.is-small {
+            + .progress-value {
+                font-size: calc(0.75rem / 1.5);
+                line-height: 0.75rem;
+            }
+        }
+        &.is-medium {
+            + .progress-value {
+                font-size: calc(1.25rem / 1.5);
+                line-height: 1.25rem;
+            }
+        }
+        &.is-large {
+            + .progress-value {
+                font-size: calc(1.5rem / 1.5);
+                line-height: 1.5rem;
+            }
+        }
+
+        &::-webkit-progress-value {
+            transition: width 0.5s ease;
+        }
+    }
+}

package/src/scss/components/_radio.scss

@@ -60,6 +60,20 @@ $radio-size: 1.25em !default;
                     transform: scale(.5);
                 }
             }
+            &:focus {
+                + .check {
+                    box-shadow: 0 0 0.5em rgba($grey, 0.8);
+                }
+                &:checked + .check {
+                    box-shadow: 0 0 0.5em rgba($radio-active-background-color, 0.8);
+                    @each $name, $pair in $colors {
+                        $color: nth($pair, 1);
+                        &.is-#{$name} {
+                            box-shadow: 0 0 0.5em rgba($color, 0.8);
+                        }
+                    }
+                }
+            }
         }
         .control-label {
             padding-left: 0.5em;
@@ -78,20 +92,6 @@ $radio-size: 1.25em !default;
                 }
             }
         }
-        &:focus {
-            input[type=radio] + .check {
-                box-shadow: 0 0 0.5em rgba($grey, 0.8);
-            }
-            input[type=radio]:checked + .check {
-                box-shadow: 0 0 0.5em rgba($radio-active-background-color, 0.8);
-                @each $name, $pair in $colors {
-                    $color: nth($pair, 1);
-                    &.is-#{$name} {
-                        box-shadow: 0 0 0.5em rgba($color, 0.8);
-                    }
-                }
-            }
-        }
         &.is-small {
             @include control-small;
         }

package/src/scss/components/_slider.scss

@@ -0,0 +1,138 @@
+$slider-radius: $radius !default;
+$slider-track-background: $grey-lighter !default;
+$slider-track-radius: $radius !default;
+$slider-track-border: 0px solid $grey !default;
+$slider-track-shadow: 0px 0px 0px $grey !default;
+$slider-thumb-background: $white !default;
+$slider-thumb-radius: $radius !default;
+$slider-thumb-border: 1px solid $grey-light !default;
+$slider-thumb-shadow: none !default;
+$slider-thumb-to-track-ratio: 2 !default;
+$slider-tick-to-track-ratio: 0.5 !default;
+$slider-tick-width: 3px !default;
+$slider-tick-radius: $radius !default;
+$slider-tick-background: $grey-light !default;
+$slider-mark-size: 0.75rem !default;
+
+@mixin slider-size($size) {
+	$track-height: $size / $slider-thumb-to-track-ratio;
+	$tick-height: $track-height * $slider-tick-to-track-ratio;
+	$thumb-size: $size;
+
+    .b-slider-track {
+        height: $track-height;
+    }
+
+	.b-slider-thumb {
+		height: $thumb-size;
+		width: $thumb-size;
+    }
+
+    .b-slider-tick {
+        height: $tick-height;
+    }
+
+    .b-slider-tick-label {
+        font-size: $slider-mark-size;
+        position: absolute;
+        top: calc(#{$track-height} / 2 + 2px);
+    }
+}
+
+.b-slider {
+    margin: 1em 0;
+    background: transparent;
+    width: 100%;
+
+    .b-slider-track {
+        display: flex;
+        align-items: center;
+        position: relative;
+        cursor: pointer;
+        background: $grey-lighter;
+        border-radius: $slider-radius;
+    }
+    .b-slider-fill {
+        position: absolute;
+        height: 100%;
+        box-shadow: $slider-track-shadow;
+        background: $slider-track-background;
+        border-radius: $slider-track-radius;
+        border: $slider-track-border;
+    }
+    .b-slider-thumb-wrapper {
+        display: inline-flex;
+        align-items: center;
+        position: absolute;
+        transform: translateX(-50%);
+        cursor: grab;
+
+        .b-slider-thumb {
+            box-shadow: $slider-thumb-shadow;
+            border: $slider-thumb-border;
+            border-radius: $slider-thumb-radius;
+            background: $slider-thumb-background;
+            &:focus {
+                transform: scale(1.25);
+            }
+        }
+
+        &.is-dragging {
+            cursor: grabbing;
+            .b-slider-thumb {
+                transform: scale(1.25);
+            }
+        }
+    }
+
+    &.is-rounded {
+        .b-slider-thumb {
+            border-radius: $radius-rounded;
+        }
+    }
+    &.is-disabled {
+        .b-slider-track {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+        .b-slider-thumb-wrapper {
+            cursor: not-allowed;
+            .b-slider-thumb {
+                transform: scale(1);
+            }
+        }
+    }
+
+    @include slider-size($size-normal);
+    &.is-small {
+        @include slider-size($size-small);
+    }
+    &.is-medium {
+        @include slider-size($size-medium);
+    }
+    &.is-large {
+        @include slider-size($size-large);
+    }
+
+    @each $name, $pair in $colors {
+        $color: nth($pair, 1);
+        &.is-#{$name} {
+            .b-slider-fill {
+                background: $color !important;
+            }
+        }
+    }
+
+    .b-slider-tick {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+		width: $slider-tick-width;
+        transform: translateX(-50%);
+        background: $slider-tick-background;
+        border-radius: $slider-tick-radius;
+        &.is-tick-hidden {
+            background: transparent;
+        }
+    }
+}