buefy 0.9.9 → 0.9.13

package/src/components/clockpicker/Clockpicker.vue

@@ -1,259 +1,259 @@
-<template>
-    <div class="b-clockpicker control" :class="[size, type, {'is-expanded': expanded}]">
-        <b-dropdown
-            v-if="!isMobile || inline"
-            ref="dropdown"
-            :position="position"
-            :disabled="disabled"
-            :inline="inline"
-            :append-to-body="appendToBody"
-            append-to-body-copy-parent
-            @active-change="onActiveChange">
-            <template #trigger v-if="!inline">
-                <slot name="trigger">
-                    <b-input
-                        ref="input"
-                        slot="trigger"
-                        autocomplete="off"
-                        :value="formatValue(computedValue)"
-                        :placeholder="placeholder"
-                        :size="size"
-                        :icon="icon"
-                        :icon-pack="iconPack"
-                        :loading="loading"
-                        :disabled="disabled"
-                        :readonly="!editable"
-                        :rounded="rounded"
-                        v-bind="$attrs"
-                        :use-html5-validation="useHtml5Validation"
-                        @click.native.stop="toggle(true)"
-                        @keyup.native.enter="toggle(true)"
-                        @change.native="onChange($event.target.value)"
-                        @focus="handleOnFocus"
-                        @blur="checkHtml5Validity()"/>
-                </slot>
-            </template>
-            <div
-                class="card"
-                :disabled="disabled"
-                custom>
-                <header v-if="inline" class="card-header">
-                    <div class="b-clockpicker-header card-header-title">
-                        <div class="b-clockpicker-time">
-                            <span
-                                class="b-clockpicker-btn"
-                                :class="{ active: isSelectingHour }"
-                                @click="isSelectingHour = true">{{ hoursDisplay }}</span>
-                            <span>{{ hourLiteral }}</span>
-                            <span
-                                class="b-clockpicker-btn"
-                                :class="{ active: !isSelectingHour }"
-                                @click="isSelectingHour = false">{{ minutesDisplay }}</span>
-                        </div>
-                        <div v-if="!isHourFormat24" class="b-clockpicker-period">
-                            <div
-                                class="b-clockpicker-btn"
-                                :class="{
-                                    active: meridienSelected === amString || meridienSelected === AM
-                                }"
-                                @click="onMeridienClick(amString)">{{ amString }}</div>
-                            <div
-                                class="b-clockpicker-btn"
-                                :class="{
-                                    active: meridienSelected === pmString || meridienSelected === PM
-                                }"
-                                @click="onMeridienClick(pmString)">{{ pmString }}</div>
-                        </div>
-                    </div>
-                </header>
-                <div class="card-content">
-                    <div
-                        class="b-clockpicker-body"
-                        :style="{ width: faceSize + 'px', height: faceSize + 'px' }">
-                        <div v-if="!inline" class="b-clockpicker-time">
-                            <div
-                                class="b-clockpicker-btn"
-                                :class="{ active: isSelectingHour }"
-                                @click="isSelectingHour = true">{{ hoursLabel }}</div>
-                            <span
-                                class="b-clockpicker-btn"
-                                :class="{ active: !isSelectingHour }"
-                                @click="isSelectingHour = false">{{ minutesLabel }}</span>
-                        </div>
-                        <div v-if="!isHourFormat24 && !inline" class="b-clockpicker-period">
-                            <div
-                                class="b-clockpicker-btn"
-                                :class="{
-                                    active: meridienSelected === amString || meridienSelected === AM
-                                }"
-                                @click="onMeridienClick(amString)">{{ amString }}</div>
-                            <div
-                                class="b-clockpicker-btn"
-                                :class="{
-                                    active: meridienSelected === pmString || meridienSelected === PM
-                                }"
-                                @click="onMeridienClick(pmString)">{{ pmString }}</div>
-                        </div>
-                        <b-clockpicker-face
-                            :picker-size="faceSize"
-                            :min="minFaceValue"
-                            :max="maxFaceValue"
-                            :face-numbers="isSelectingHour ? hours : minutes"
-                            :disabled-values="faceDisabledValues"
-                            :double="isSelectingHour && isHourFormat24"
-                            :value="isSelectingHour ? hoursSelected : minutesSelected"
-                            @input="onClockInput"
-                            @change="onClockChange" />
-                    </div>
-                </div>
-                <footer
-                    v-if="$slots.default !== undefined && $slots.default.length"
-                    class="b-clockpicker-footer card-footer">
-                    <slot/>
-                </footer>
-            </div>
-        </b-dropdown>
-        <b-input
-            v-else
-            ref="input"
-            type="time"
-            autocomplete="off"
-            :value="formatHHMMSS(computedValue)"
-            :placeholder="placeholder"
-            :size="size"
-            :icon="icon"
-            :icon-pack="iconPack"
-            :loading="loading"
-            :max="formatHHMMSS(maxTime)"
-            :min="formatHHMMSS(minTime)"
-            :disabled="disabled"
-            :readonly="false"
-            v-bind="$attrs"
-            :use-html5-validation="useHtml5Validation"
-            @click.native.stop="toggle(true)"
-            @keyup.native.enter="toggle(true)"
-            @change.native="onChangeNativePicker"
-            @focus="handleOnFocus"
-            @blur="onBlur() && checkHtml5Validity()"/>
-    </div>
-</template>
-
-<script>
-import TimepickerMixin from '../../utils/TimepickerMixin'
-import config from '../../utils/config'
-
-import Dropdown from '../dropdown/Dropdown'
-import DropdownItem from '../dropdown/DropdownItem'
-import Input from '../input/Input'
-import Field from '../field/Field'
-import Icon from '../icon/Icon'
-
-import ClockpickerFace from './ClockpickerFace'
-
-const outerPadding = 12
-
-export default {
-    name: 'BClockpicker',
-    components: {
-        [ClockpickerFace.name]: ClockpickerFace,
-        [Input.name]: Input,
-        [Field.name]: Field,
-        [Icon.name]: Icon,
-        [Dropdown.name]: Dropdown,
-        [DropdownItem.name]: DropdownItem
-    },
-    mixins: [TimepickerMixin],
-    props: {
-        pickerSize: {
-            type: Number,
-            default: 290
-        },
-        incrementMinutes: {
-            type: Number,
-            default: 5
-        },
-        autoSwitch: {
-            type: Boolean,
-            default: true
-        },
-        type: {
-            type: String,
-            default: 'is-primary'
-        },
-        hoursLabel: {
-            type: String,
-            default: () => config.defaultClockpickerHoursLabel || 'Hours'
-        },
-        minutesLabel: {
-            type: String,
-            default: () => config.defaultClockpickerMinutesLabel || 'Min'
-        }
-    },
-    data() {
-        return {
-            isSelectingHour: true,
-            isDragging: false,
-            _isClockpicker: true
-        }
-    },
-    computed: {
-        hoursDisplay() {
-            if (this.hoursSelected == null) return '--'
-            if (this.isHourFormat24) return this.pad(this.hoursSelected)
-
-            let display = this.hoursSelected
-            if (this.meridienSelected === this.pmString) {
-                display -= 12
-            }
-            if (display === 0) display = 12
-            return display
-        },
-        minutesDisplay() {
-            return this.minutesSelected == null ? '--' : this.pad(this.minutesSelected)
-        },
-        minFaceValue() {
-            return this.isSelectingHour &&
-                !this.isHourFormat24 &&
-                this.meridienSelected === this.pmString ? 12 : 0
-        },
-        maxFaceValue() {
-            return this.isSelectingHour
-                ? (
-                    !this.isHourFormat24 &&
-                    this.meridienSelected === this.amString
-                        ? 11
-                        : 23
-                )
-                : 59
-        },
-        faceSize() {
-            return this.pickerSize - (outerPadding * 2)
-        },
-        faceDisabledValues() {
-            return this.isSelectingHour ? this.isHourDisabled : this.isMinuteDisabled
-        }
-    },
-    methods: {
-        onClockInput(value) {
-            if (this.isSelectingHour) {
-                this.hoursSelected = value
-                this.onHoursChange(value)
-            } else {
-                this.minutesSelected = value
-                this.onMinutesChange(value)
-            }
-        },
-        onClockChange(value) {
-            if (this.autoSwitch && this.isSelectingHour) {
-                this.isSelectingHour = !this.isSelectingHour
-            }
-        },
-        onMeridienClick(value) {
-            if (this.meridienSelected !== value) {
-                this.meridienSelected = value
-                this.onMeridienChange(value)
-            }
-        }
-    }
-}
-</script>
+<template>
+    <div class="b-clockpicker control" :class="[size, type, {'is-expanded': expanded}]">
+        <b-dropdown
+            v-if="!isMobile || inline"
+            ref="dropdown"
+            :position="position"
+            :disabled="disabled"
+            :inline="inline"
+            :append-to-body="appendToBody"
+            append-to-body-copy-parent
+            @active-change="onActiveChange">
+            <template #trigger v-if="!inline">
+                <slot name="trigger">
+                    <b-input
+                        ref="input"
+                        slot="trigger"
+                        autocomplete="off"
+                        :value="formatValue(computedValue)"
+                        :placeholder="placeholder"
+                        :size="size"
+                        :icon="icon"
+                        :icon-pack="iconPack"
+                        :loading="loading"
+                        :disabled="disabled"
+                        :readonly="!editable"
+                        :rounded="rounded"
+                        v-bind="$attrs"
+                        :use-html5-validation="useHtml5Validation"
+                        @click.native.stop="toggle(true)"
+                        @keyup.native.enter="toggle(true)"
+                        @change.native="onChange($event.target.value)"
+                        @focus="handleOnFocus"
+                        @blur="checkHtml5Validity()"/>
+                </slot>
+            </template>
+            <div
+                class="card"
+                :disabled="disabled"
+                custom>
+                <header v-if="inline" class="card-header">
+                    <div class="b-clockpicker-header card-header-title">
+                        <div class="b-clockpicker-time">
+                            <span
+                                class="b-clockpicker-btn"
+                                :class="{ active: isSelectingHour }"
+                                @click="isSelectingHour = true">{{ hoursDisplay }}</span>
+                            <span>{{ hourLiteral }}</span>
+                            <span
+                                class="b-clockpicker-btn"
+                                :class="{ active: !isSelectingHour }"
+                                @click="isSelectingHour = false">{{ minutesDisplay }}</span>
+                        </div>
+                        <div v-if="!isHourFormat24" class="b-clockpicker-period">
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{
+                                    active: meridienSelected === amString || meridienSelected === AM
+                                }"
+                                @click="onMeridienClick(amString)">{{ amString }}</div>
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{
+                                    active: meridienSelected === pmString || meridienSelected === PM
+                                }"
+                                @click="onMeridienClick(pmString)">{{ pmString }}</div>
+                        </div>
+                    </div>
+                </header>
+                <div class="card-content">
+                    <div
+                        class="b-clockpicker-body"
+                        :style="{ width: faceSize + 'px', height: faceSize + 'px' }">
+                        <div v-if="!inline" class="b-clockpicker-time">
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{ active: isSelectingHour }"
+                                @click="isSelectingHour = true">{{ hoursLabel }}</div>
+                            <span
+                                class="b-clockpicker-btn"
+                                :class="{ active: !isSelectingHour }"
+                                @click="isSelectingHour = false">{{ minutesLabel }}</span>
+                        </div>
+                        <div v-if="!isHourFormat24 && !inline" class="b-clockpicker-period">
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{
+                                    active: meridienSelected === amString || meridienSelected === AM
+                                }"
+                                @click="onMeridienClick(amString)">{{ amString }}</div>
+                            <div
+                                class="b-clockpicker-btn"
+                                :class="{
+                                    active: meridienSelected === pmString || meridienSelected === PM
+                                }"
+                                @click="onMeridienClick(pmString)">{{ pmString }}</div>
+                        </div>
+                        <b-clockpicker-face
+                            :picker-size="faceSize"
+                            :min="minFaceValue"
+                            :max="maxFaceValue"
+                            :face-numbers="isSelectingHour ? hours : minutes"
+                            :disabled-values="faceDisabledValues"
+                            :double="isSelectingHour && isHourFormat24"
+                            :value="isSelectingHour ? hoursSelected : minutesSelected"
+                            @input="onClockInput"
+                            @change="onClockChange" />
+                    </div>
+                </div>
+                <footer
+                    v-if="$slots.default !== undefined && $slots.default.length"
+                    class="b-clockpicker-footer card-footer">
+                    <slot/>
+                </footer>
+            </div>
+        </b-dropdown>
+        <b-input
+            v-else
+            ref="input"
+            type="time"
+            autocomplete="off"
+            :value="formatHHMMSS(computedValue)"
+            :placeholder="placeholder"
+            :size="size"
+            :icon="icon"
+            :icon-pack="iconPack"
+            :loading="loading"
+            :max="formatHHMMSS(maxTime)"
+            :min="formatHHMMSS(minTime)"
+            :disabled="disabled"
+            :readonly="false"
+            v-bind="$attrs"
+            :use-html5-validation="useHtml5Validation"
+            @click.native.stop="toggle(true)"
+            @keyup.native.enter="toggle(true)"
+            @change.native="onChangeNativePicker"
+            @focus="handleOnFocus"
+            @blur="onBlur() && checkHtml5Validity()"/>
+    </div>
+</template>
+
+<script>
+import TimepickerMixin from '../../utils/TimepickerMixin'
+import config from '../../utils/config'
+
+import Dropdown from '../dropdown/Dropdown'
+import DropdownItem from '../dropdown/DropdownItem'
+import Input from '../input/Input'
+import Field from '../field/Field'
+import Icon from '../icon/Icon'
+
+import ClockpickerFace from './ClockpickerFace'
+
+const outerPadding = 12
+
+export default {
+    name: 'BClockpicker',
+    components: {
+        [ClockpickerFace.name]: ClockpickerFace,
+        [Input.name]: Input,
+        [Field.name]: Field,
+        [Icon.name]: Icon,
+        [Dropdown.name]: Dropdown,
+        [DropdownItem.name]: DropdownItem
+    },
+    mixins: [TimepickerMixin],
+    props: {
+        pickerSize: {
+            type: Number,
+            default: 290
+        },
+        incrementMinutes: {
+            type: Number,
+            default: 5
+        },
+        autoSwitch: {
+            type: Boolean,
+            default: true
+        },
+        type: {
+            type: String,
+            default: 'is-primary'
+        },
+        hoursLabel: {
+            type: String,
+            default: () => config.defaultClockpickerHoursLabel || 'Hours'
+        },
+        minutesLabel: {
+            type: String,
+            default: () => config.defaultClockpickerMinutesLabel || 'Min'
+        }
+    },
+    data() {
+        return {
+            isSelectingHour: true,
+            isDragging: false,
+            _isClockpicker: true
+        }
+    },
+    computed: {
+        hoursDisplay() {
+            if (this.hoursSelected == null) return '--'
+            if (this.isHourFormat24) return this.pad(this.hoursSelected)
+
+            let display = this.hoursSelected
+            if (this.meridienSelected === this.pmString) {
+                display -= 12
+            }
+            if (display === 0) display = 12
+            return display
+        },
+        minutesDisplay() {
+            return this.minutesSelected == null ? '--' : this.pad(this.minutesSelected)
+        },
+        minFaceValue() {
+            return this.isSelectingHour &&
+                !this.isHourFormat24 &&
+                this.meridienSelected === this.pmString ? 12 : 0
+        },
+        maxFaceValue() {
+            return this.isSelectingHour
+                ? (
+                    !this.isHourFormat24 &&
+                    this.meridienSelected === this.amString
+                        ? 11
+                        : 23
+                )
+                : 59
+        },
+        faceSize() {
+            return this.pickerSize - (outerPadding * 2)
+        },
+        faceDisabledValues() {
+            return this.isSelectingHour ? this.isHourDisabled : this.isMinuteDisabled
+        }
+    },
+    methods: {
+        onClockInput(value) {
+            if (this.isSelectingHour) {
+                this.hoursSelected = value
+                this.onHoursChange(value)
+            } else {
+                this.minutesSelected = value
+                this.onMinutesChange(value)
+            }
+        },
+        onClockChange(value) {
+            if (this.autoSwitch && this.isSelectingHour) {
+                this.isSelectingHour = !this.isSelectingHour
+            }
+        },
+        onMeridienClick(value) {
+            if (this.meridienSelected !== value) {
+                this.meridienSelected = value
+                this.onMeridienChange(value)
+            }
+        }
+    }
+}
+</script>

package/src/components/datepicker/Datepicker.vue

@@ -492,13 +492,12 @@ export default {
             }).resolvedOptions()
         },
         dtf() {
-            return new Intl.DateTimeFormat(this.locale, { timeZone: 'UTC' })
+            return new Intl.DateTimeFormat(this.locale)
         },
         dtfMonth() {
             return new Intl.DateTimeFormat(this.locale, {
                 year: this.localeOptions.year || 'numeric',
-                month: this.localeOptions.month || '2-digit',
-                timeZone: 'UTC'
+                month: this.localeOptions.month || '2-digit'
             })
         },
         newMonthNames() {
@@ -737,11 +736,12 @@ export default {
         },
         updateInternalState(value) {
             if (this.dateSelected === value) return
-            const currentDate = Array.isArray(value)
+            const isArray = Array.isArray(value)
+            const currentDate = isArray
                 ? (!value.length ? this.dateCreator() : value[value.length - 1])
                 : (!value ? this.dateCreator() : value)
-            if (Array.isArray(value) &&
-                this.dateSelected && value.length > this.dateSelected.length) {
+            if (!isArray ||
+                (isArray && this.dateSelected && value.length > this.dateSelected.length)) {
                 this.focusedDateData = {
                     day: currentDate.getDate(),
                     month: currentDate.getMonth(),
@@ -815,6 +815,10 @@ export default {
             if (!value) {
                 this.onBlur()
             }
+            /*
+             * Emit 'active-change' when on dropdown active state change
+             */
+            this.$emit('active-change', value)
         },
 
         changeFocus(day) {

package/src/components/datetimepicker/Datetimepicker.vue

@@ -31,6 +31,7 @@
         :append-to-body="appendToBody"
         @focus="onFocus"
         @blur="onBlur"
+        @active-change="onActiveChange"
         @icon-right-click="$emit('icon-right-click')"
         @change-month="$emit('change-month', $event)"
         @change-year="$emit('change-year', $event)">
@@ -216,7 +217,7 @@ export default {
                 hour: this.localeOptions.hour || 'numeric',
                 minute: this.localeOptions.minute || 'numeric',
                 second: this.enableSeconds() ? this.localeOptions.second || 'numeric' : undefined,
-                hour12: !this.isHourFormat24()
+                hourCycle: !this.isHourFormat24() ? 'h12' : 'h23'
             })
         },
         isMobileNative() {
@@ -391,6 +392,12 @@ export default {
                 this.computedValue = null
             }
         },
+        /*
+         * Emit 'active-change' on datepicker active state change
+         */
+        onActiveChange(value) {
+            this.$emit('active-change', value)
+        },
         formatNative(value) {
             const date = new Date(value)
             if (value && !isNaN(date)) {

package/src/components/dialog/Dialog.vue

@@ -56,16 +56,14 @@
                 </section>
 
                 <footer class="modal-card-foot">
-                    <button
+                    <b-button
                         v-if="showCancel"
-                        class="button"
                         ref="cancelButton"
-                        @click="cancel('button')">{{ cancelText }}</button>
-                    <button
-                        class="button"
-                        :class="type"
+                        @click="cancel('button')">{{ cancelText }}</b-button>
+                    <b-button
+                        :type="type"
                         ref="confirmButton"
-                        @click="confirm">{{ confirmText }}</button>
+                        @click="confirm">{{ confirmText }}</b-button>
                 </footer>
             </div>
         </div>
@@ -76,13 +74,15 @@
 import trapFocus from '../../directives/trapFocus'
 import Icon from '../icon/Icon'
 import Modal from '../modal/Modal'
+import Button from '../button/Button'
 import config from '../../utils/config'
 import { removeElement } from '../../utils/helpers'
 
 export default {
     name: 'BDialog',
     components: {
-        [Icon.name]: Icon
+        [Icon.name]: Icon,
+        [Button.name]: Button
     },
     directives: {
         trapFocus
@@ -246,9 +246,9 @@ export default {
             if (this.hasInput) {
                 this.$refs.input.focus()
             } else if (this.focusOn === 'cancel' && this.showCancel) {
-                this.$refs.cancelButton.focus()
+                this.$refs.cancelButton.$el.focus()
             } else {
-                this.$refs.confirmButton.focus()
+                this.$refs.confirmButton.$el.focus()
             }
         })
     }