buefy 0.7.9 → 0.8.2

package/src/scss/components/_steps.scss

@@ -8,7 +8,7 @@ MIT (https://github.com/Wikiki/bulma-steps/blob/master/LICENSE)
 $steps-maker-default-color: $grey-light !default;
 $steps-marker-default-border: .2em solid #fff !default;
 $steps-default-color: $grey-lighter !default;
-$steps-completed-color: $primary !default;
+$steps-previous-color: $primary !default;
 $steps-active-color: $primary !default;
 $steps-divider-height: .2em !default;
 
@@ -110,7 +110,7 @@ $steps-divider-height: .2em !default;
                                 background-position: left bottom;
                             }
                         }
-                        &.is-completed {
+                        &.is-previous {
                             .step-marker {
                                 color: $color-invert;
                                 background-color: $color;
@@ -165,10 +165,10 @@ $steps-divider-height: .2em !default;
                         background-position: left bottom;
                     }
                 }
-                &.is-completed {
+                &.is-previous {
                     .step-marker {
                         color: $white;
-                        background-color: $steps-completed-color;
+                        background-color: $steps-previous-color;
                     }
 
                     &::before {

package/src/scss/components/_switch.scss

@@ -26,12 +26,12 @@ $switch-active-background-color: $primary !default;
             height: #{$switch-width / 2 + $switch-padding};
             padding: $switch-padding;
             background: $grey-light;
-            border-radius: 1em;
+            border-radius: $radius;
             transition: background $speed-slow $easing;
             &:before {
                 content: "";
                 display: block;
-                border-radius: 1em;
+                border-radius: $radius;
                 width: #{($switch-width - $switch-padding * 2) / 2};
                 height: #{($switch-width - $switch-padding * 2) / 2};
                 background: $background;
@@ -92,6 +92,58 @@ $switch-active-background-color: $primary !default;
             }
         }
     }
+    &.is-rounded {
+        input[type=checkbox] {
+            + .check {
+                border-radius: $radius-rounded;
+                &:before {
+                    border-radius: $radius-rounded;
+                }
+            }
+        }
+    }
+    &.is-outlined {
+        input[type=checkbox] {
+            + .check {
+                background: transparent;
+                border: .1rem solid $grey-light;
+                &:before {
+                    background: $grey-light;
+                }
+            }
+            &:checked + .check {
+                border-color: $switch-active-background-color;
+                @each $name, $pair in $colors {
+                    $color: nth($pair, 1);
+                    &.is-#{$name} {
+                        border-color: $color;
+                        &:before {
+                            background: $color;
+                        }
+                    }
+                }
+                &:before {
+                    background: $switch-active-background-color;
+                }
+            }
+        }
+        &:hover {
+            input[type=checkbox] + .check {
+                background: transparent;
+                border-color: rgba($grey-light, 0.9);
+            }
+            input[type=checkbox]:checked + .check {
+                background: transparent;
+                border-color: rgba($switch-active-background-color, 0.9);
+                @each $name, $pair in $colors {
+                    $color: nth($pair, 1);
+                    &.is-#{$name} {
+                        border-color: rgba($color, 0.9);
+                    }
+                }
+            }
+        }
+    }
     &.is-small {
         @include control-small;
     }

package/src/scss/components/_taginput.scss

@@ -24,6 +24,9 @@ $taginput-height: 1.7em;
                 margin-bottom: 0;
                 font-size: 0.9em;
                 height: $taginput-height;
+                &.is-delete {
+                    width: $taginput-height;
+                }
             }
             &:not(:last-child) {
                 margin-left: 0.275rem;

package/src/scss/components/_upload.scss

@@ -10,9 +10,7 @@
         opacity: 0;
         outline: none;
         cursor: pointer;
-        &.file-draggable {
-            z-index: -1;
-        }
+        z-index: -1;
     }
     .upload-draggable {
         cursor: pointer;

package/src/utils/SlotComponent.js

@@ -9,6 +9,12 @@ export default {
             type: String,
             default: 'default'
         },
+        scoped: {
+            type: Boolean
+        },
+        props: {
+            type: Object
+        },
         tag: {
             type: String,
             default: 'div'
@@ -38,8 +44,9 @@ export default {
     },
     render(createElement) {
         if (this.isVueComponent()) {
-            const slots = this.component.$slots[this.name]
-            return createElement(this.tag, {}, slots)
+            return createElement(this.tag, {},
+                this.scoped ? this.component.$scopedSlots[this.name](this.props)
+                    : this.component.$slots[this.name])
         }
     }
 }

package/src/utils/TimepickerMixin.js

@@ -118,7 +118,9 @@ export default {
         position: String,
         unselectableTimes: Array,
         openOnFocus: Boolean,
-        enableSeconds: Boolean
+        enableSeconds: Boolean,
+        defaultMinutes: Number,
+        defaultSeconds: Number
     },
     data() {
         return {
@@ -175,7 +177,7 @@ export default {
             const minutes = []
             for (let i = 0; i < 60; i += this.incrementMinutes) {
                 minutes.push({
-                    label: this.formatNumber(i),
+                    label: this.formatNumber(i, true),
                     value: i
                 })
             }
@@ -186,7 +188,7 @@ export default {
             const seconds = []
             for (let i = 0; i < 60; i += this.incrementSeconds) {
                 seconds.push({
-                    label: this.formatNumber(i),
+                    label: this.formatNumber(i, true),
                     value: i
                 })
             }
@@ -241,6 +243,12 @@ export default {
         },
 
         onHoursChange(value) {
+            if (!this.minutesSelected && this.defaultMinutes) {
+                this.minutesSelected = this.defaultMinutes
+            }
+            if (!this.secondsSelected && this.defaultSeconds) {
+                this.secondsSelected = this.defaultSeconds
+            }
             this.updateDateSelected(
                 parseInt(value, 10),
                 this.minutesSelected,
@@ -250,6 +258,9 @@ export default {
         },
 
         onMinutesChange(value) {
+            if (!this.secondsSelected && this.defaultSeconds) {
+                this.secondsSelected = this.defaultSeconds
+            }
             this.updateDateSelected(
                 this.hoursSelected,
                 parseInt(value, 10),
@@ -460,7 +471,7 @@ export default {
                 const hours = date.getHours()
                 const minutes = date.getMinutes()
                 const seconds = date.getSeconds()
-                return this.formatNumber(hours) + ':' +
+                return this.formatNumber(hours, true) + ':' +
                     this.formatNumber(minutes, true) + ':' +
                     this.formatNumber(seconds, true)
             }
@@ -490,8 +501,8 @@ export default {
             }
         },
 
-        formatNumber(value, isMinute) {
-            return this.isHourFormat24 || isMinute
+        formatNumber(value, prependZero) {
+            return this.isHourFormat24 || prependZero
                 ? this.pad(value)
                 : value
         },

package/src/utils/config.js

@@ -12,6 +12,7 @@ let config = {
     defaultNotificationPosition: null,
     defaultTooltipType: 'is-primary',
     defaultTooltipAnimated: false,
+    defaultTooltipDelay: 0,
     defaultInputAutocomplete: 'on',
     defaultDateFormatter: null,
     defaultDateParser: null,
@@ -28,12 +29,14 @@ let config = {
     defaultTimepickerMobileNative: true,
     defaultNoticeQueue: true,
     defaultInputHasCounter: true,
+    defaultTaginputHasCounter: true,
     defaultUseHtml5Validation: true,
     defaultDropdownMobileModal: true,
     defaultFieldLabelPosition: null,
     defaultDatepickerYearsRange: [-100, 3],
     defaultDatepickerNearbyMonthDays: true,
-    defaultDatepickerNearbySelectableMonthDays: false
+    defaultDatepickerNearbySelectableMonthDays: false,
+    defaultDatepickerShowWeekNumber: false
 }
 
 export default config

package/src/utils/helpers.spec.js

@@ -0,0 +1,67 @@
+import { getValueByPath, indexOf, escapeRegExpChars } from './helpers'
+
+describe('helpers', () => {
+    describe('getValueByPath', () => {
+        it('get value of an object property/path even if it is nested', () => {
+            const obj = {
+                val1: 'val1',
+                val2: {
+                    val21: 'val21'
+                },
+                val3: {
+                    val31: {
+                        val311: 'val311'
+                    }
+                }
+            }
+
+            expect(getValueByPath(obj, 'val1')).toBe('val1')
+            expect(getValueByPath(obj, 'val2.val21')).toBe('val21')
+            expect(getValueByPath(obj, 'val3.val31.val311')).toBe('val311')
+        })
+    })
+
+    describe('indexOf', () => {
+        it('get index of an array element using equality function', () => {
+            const obj1 = {
+                selected: true,
+                valid: false
+            }
+            const obj2 = {
+                selected: false,
+                valid: false
+            }
+            const obj3 = {
+                selected: true,
+                valid: true
+            }
+            const obj4 = {
+                selected: false,
+                valid: true
+            }
+            const arr = [
+                obj1,
+                obj2,
+                obj3,
+                obj4
+            ]
+            const fnc = (obj1, obj2) => {
+                return obj1.selected === obj2.selected && obj1.valid === obj2.valid
+            }
+
+            expect(indexOf(arr, obj1, fnc)).toBe(0)
+            expect(indexOf(arr, obj2, fnc)).toBe(1)
+            expect(indexOf(arr, obj3, fnc)).toBe(2)
+            expect(indexOf(arr, obj4, fnc)).toBe(3)
+        })
+    })
+
+    describe('escapeRegExpChars', () => {
+        it('escape regex characters', () => {
+            const initial = 'All of these should be escaped: \\ ^ $ * + ? . ( ) | { } [ ]'
+            const expected = 'All of these should be escaped: \\\\ \\^ \\$ \\* \\+ \\? \\. \\( \\) \\| \\{ \\} \\[ \\]'
+
+            expect(escapeRegExpChars(initial)).toBe(expected)
+        })
+    })
+})

package/src/utils/plugins.js

@@ -10,5 +10,6 @@ export const registerComponent = (Vue, component) => {
 }
 
 export const registerComponentProgrammatic = (Vue, property, component) => {
-    Vue.prototype[property] = component
+    if (!Vue.prototype.$buefy) Vue.prototype.$buefy = {}
+    Vue.prototype.$buefy[property] = component
 }

package/types/components.d.ts

@@ -86,7 +86,7 @@ type PromptDialogConfig = DialogConfig & {
     inputAttrs?: any;
 };
 
-export declare const Dialog: {
+export declare const DialogProgrammatic: {
     alert: (params: DialogConfig | string) => any;
     confirm: (params: DialogConfig) => any;
     prompt: (params: PromptDialogConfig) => any;
@@ -134,7 +134,7 @@ export declare type SnackbarConfig = {
     indefinite?: boolean;
     onAction?: () => any;
 }
-export declare const Snackbar: {
+export declare const SnackbarProgrammatic: {
     open: (params: SnackbarConfig | string) => any;
 }
 
@@ -172,7 +172,7 @@ export declare type ToastConfig = {
     queue?: boolean;
 }
 
-export declare const Toast: {
+export declare const ToastProgrammatic: {
     open: (params: ToastConfig | string) => any;
 }
 

package/types/index.d.ts

@@ -1,20 +1,30 @@
 import _Vue from "vue";
 
-import { Dialog, ModalProgrammatic, LoadingProgrammatic, Toast, Snackbar, NotificationProgrammatic } from "./components";
+import {
+    DialogProgrammatic,
+    ModalProgrammatic,
+    LoadingProgrammatic,
+    ToastProgrammatic,
+    SnackbarProgrammatic,
+    NotificationProgrammatic } from "./components";
 import { ColorModifiers, GlobalPositions } from "./helpers";
 
-// Adds Buefy method signatures to Vue instance (ie this.$dialog)
+// Adds Buefy method signatures to Vue instance (ie this.$buefy.dialog)
 declare module 'vue/types/vue' {
     interface Vue {
-        $dialog: typeof Dialog,
-        $loading: typeof LoadingProgrammatic,
-        $modal: typeof ModalProgrammatic,
-        $snackbar: typeof Snackbar,
-        $toast: typeof Toast,
-        $notification: typeof NotificationProgrammatic
+        $buefy: BuefyNamespace
     }
 }
 
+export declare type BuefyNamespace = {
+    dialog: typeof DialogProgrammatic,
+    loading: typeof LoadingProgrammatic,
+    modal: typeof ModalProgrammatic,
+    snackbar: typeof SnackbarProgrammatic,
+    toast: typeof ToastProgrammatic,
+    notification: typeof NotificationProgrammatic
+}
+
 export declare type BuefyConfig = {
     defaultContainerElement?: string,
     defaultIconPack?: string;
@@ -29,6 +39,7 @@ export declare type BuefyConfig = {
     defaultNotificationPosition?: GlobalPositions;
     defaultTooltipType?: ColorModifiers;
     defaultTooltipAnimated?: boolean;
+    defaultTooltipDelay?: number;
     defaultInputAutocomplete?: string;
     defaultDateFormatter?: Function;
     defaultDateParser?: Function;
@@ -45,12 +56,14 @@ export declare type BuefyConfig = {
     defaultTimepickerMobileNative?: boolean;
     defaultNoticeQueue?: boolean;
     defaultInputHasCounter?: boolean;
+    defaultTaginputHasCounter?: boolean;
     defaultUseHtml5Validation?: boolean;
     defaultDropdownMobileModal?: boolean;
     defaultFieldLabelPosition?: 'inside' | 'on-border';
     defaultDatepickerYearsRange?: number[];
     defaultDatepickerNearbyMonthDays?: boolean;
     defaultDatepickerNearbySelectableMonthDays?: boolean;
+    defaultDatepickerShowWeekNumber?: boolean;
 };
 
 declare const _default: {
@@ -58,11 +71,11 @@ declare const _default: {
 };
 
 export {
-    Dialog,
+    DialogProgrammatic,
     LoadingProgrammatic,
     ModalProgrammatic,
-    Snackbar,
-    Toast,
+    SnackbarProgrammatic,
+    ToastProgrammatic,
     NotificationProgrammatic
 }