buefy 1.0.0 → 1.0.2

package/src/components/timepicker/Timepicker.vue

@@ -0,0 +1,183 @@
+<template>
+    <div
+        class="timepicker control"
+        :class="[size, {'is-expanded': expanded}]"
+        v-bind="rootAttrs"
+    >
+        <b-dropdown
+            v-if="!isMobile || inline"
+            ref="dropdown"
+            :position="position"
+            :disabled="disabledOrUndefined"
+            :inline="inline"
+            :mobile-modal="mobileModal"
+            :append-to-body="appendToBody"
+            append-to-body-copy-parent
+            @active-change="onActiveChange"
+        >
+            <template #trigger v-if="!inline">
+                <slot name="trigger">
+                    <b-input
+                        ref="input"
+                        autocomplete="off"
+                        :model-value="formatValue(computedValue)"
+                        :placeholder="placeholder"
+                        :size="size"
+                        :icon="icon"
+                        :icon-pack="iconPack"
+                        :loading="loading"
+                        :disabled="disabledOrUndefined"
+                        :readonly="!editable || undefined"
+                        :rounded="rounded"
+                        v-bind="fallthroughAttrs"
+                        :use-html5-validation="useHtml5Validation"
+                        @keyup.enter="toggle(true)"
+                        @change="onChange($event.target.value)"
+                        @focus="handleOnFocus"
+                    />
+                </slot>
+            </template>
+
+            <b-dropdown-item
+                :disabled="disabledOrUndefined"
+                :focusable="focusable"
+                custom
+            >
+                <b-field grouped position="is-centered">
+                    <b-select
+                        v-model="hoursSelected"
+                        @change="onHoursChange($event.target.value)"
+                        :disabled="disabledOrUndefined"
+                        placeholder="00"
+                    >
+                        <option
+                            v-for="hour in hours"
+                            :value="hour.value"
+                            :key="hour.value"
+                            :disabled="isHourDisabled(hour.value) || undefined"
+                        >
+                            {{ hour.label }}
+                        </option>
+                    </b-select>
+                    <span class="control is-colon">{{ hourLiteral }}</span>
+                    <b-select
+                        v-model="minutesSelected"
+                        @change="onMinutesChange($event.target.value)"
+                        :disabled="disabledOrUndefined"
+                        placeholder="00"
+                    >
+                        <option
+                            v-for="minute in minutes"
+                            :value="minute.value"
+                            :key="minute.value"
+                            :disabled="isMinuteDisabled(minute.value) || undefined"
+                        >
+                            {{ minute.label }}
+                        </option>
+                    </b-select>
+                    <template v-if="enableSeconds">
+                        <span class="control is-colon">{{ minuteLiteral }}</span>
+                        <b-select
+                            v-model="secondsSelected"
+                            @change="onSecondsChange($event.target.value)"
+                            :disabled="disabledOrUndefined"
+                            placeholder="00"
+                        >
+                            <option
+                                v-for="second in seconds"
+                                :value="second.value"
+                                :key="second.value"
+                                :disabled="isSecondDisabled(second.value) || undefined"
+                            >
+                                {{ second.label }}
+                            </option>
+                        </b-select>
+                        <span class="control is-colon">{{ secondLiteral }}</span>
+                    </template>
+                    <b-select
+                        v-model="meridienSelected"
+                        @change="onMeridienChange($event.target.value)"
+                        v-if="!isHourFormat24"
+                        :disabled="disabledOrUndefined"
+                    >
+                        <option
+                            v-for="meridien in meridiens"
+                            :value="meridien"
+                            :key="meridien"
+                        >
+                            {{ meridien }}
+                        </option>
+                    </b-select>
+                </b-field>
+
+                <footer
+                    v-if="$slots.default !== undefined"
+                    class="timepicker-footer"
+                >
+                    <slot />
+                </footer>
+            </b-dropdown-item>
+        </b-dropdown>
+
+        <b-input
+            v-else
+            ref="input"
+            type="time"
+            :step="nativeStep"
+            autocomplete="off"
+            :model-value="formatHHMMSS(computedValue)"
+            :placeholder="placeholder"
+            :size="size"
+            :icon="icon"
+            :icon-pack="iconPack"
+            :rounded="rounded"
+            :loading="loading"
+            :max="formatHHMMSS(maxTime)"
+            :min="formatHHMMSS(minTime)"
+            :disabled="disabledOrUndefined"
+            :readonly="false"
+            v-bind="fallthroughAttrs"
+            :use-html5-validation="useHtml5Validation"
+            @change="onChange($event.target.value)"
+            @focus="handleOnFocus"
+            @blur="onBlur() && checkHtml5Validity()"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import TimepickerMixin from '../../utils/TimepickerMixin'
+import BDropdown from '../dropdown/Dropdown.vue'
+import BDropdownItem from '../dropdown/DropdownItem.vue'
+import BInput from '../input/Input.vue'
+import BField from '../field/Field.vue'
+import BSelect from '../select/Select.vue'
+
+export default defineComponent({
+    name: 'BTimepicker',
+    components: {
+        BInput,
+        BField,
+        BSelect,
+        BDropdown,
+        BDropdownItem
+    },
+    mixins: [TimepickerMixin],
+    data() {
+        return {
+            _isTimepicker: true
+        }
+    },
+    computed: {
+        nativeStep() {
+            if (this.enableSeconds) {
+                return '1'
+            } else {
+                return undefined
+            }
+        }
+    }
+})
+</script>

package/src/components/timepicker/__snapshots__/Timepicker.spec.ts.snap

@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BTimepicker > render correctly 1`] = `
+"<div class="timepicker control">
+  <div class="dropdown dropdown-menu-animation is-mobile-modal">
+    <div tabindex="0" class="dropdown-trigger" aria-haspopup="true">
+      <b-input-stub autocomplete="off" type="text" lazy="false" passwordreveal="false" iconclickable="false" hascounter="true" customclass="" iconrightclickable="false" loading="false" readonly="" rounded="false" use-html5-validation="true"></b-input-stub>
+    </div>
+    <transition-stub name="fade" appear="false" persisted="false" css="true">
+      <div class="background" aria-hidden="true" style="display: none;"></div>
+    </transition-stub>
+    <transition-stub name="fade" appear="false" persisted="true" css="true">
+      <div class="dropdown-menu" aria-hidden="true" style="display: none;">
+        <div class="dropdown-content" aria-modal="true">
+          <div class="dropdown-item" tabindex="0">
+            <div class="field">
+              <!--v-if-->
+              <div class="field-body">
+                <div class="field is-grouped is-grouped-centered">
+                  <!--v-if-->
+                  <div class="control"><span class="select is-empty"><select><option disabled="" hidden="">00</option><option value="0">00</option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">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></select></span>
+                    <!--v-if-->
+                  </div><span class="control is-colon">:</span>
+                  <div class="control"><span class="select is-empty"><select><option disabled="" hidden="">00</option><option value="0">00</option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">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><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option></select></span>
+                    <!--v-if-->
+                  </div>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </div>
+              </div>
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+    </transition-stub>
+  </div>
+</div>"
+`;

package/src/components/timepicker/index.ts

@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+
+import Timepicker from './Timepicker.vue'
+
+import { registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Timepicker)
+    }
+}
+
+export default Plugin
+
+export {
+    Timepicker as BTimepicker
+}

package/src/components/toast/Toast.spec.ts

@@ -0,0 +1,74 @@
+import { transformVNodeArgs } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { BToast, ToastProgrammatic } from '@components/toast'
+
+let wrapper: VueWrapper<InstanceType<typeof BToast>>
+
+describe('BToast', () => {
+    HTMLElement.prototype.insertAdjacentElement = vi.fn()
+    beforeEach(() => {
+        wrapper = shallowMount(
+            BToast,
+            {
+                global: {
+                    stubs: {
+                        // intentionally stubs transition
+                        // to avoid flaky snapshots
+                        transition: true
+                    }
+                }
+            }
+        )
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BToast')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    describe('programmatically opened', () => {
+        beforeEach(() => {
+            // resets stubs introduced by @vue/test-utils
+            // otherwise, every BToast is replaced with a stub
+            transformVNodeArgs(undefined)
+        })
+
+        afterEach(() => {
+            vi.useRealTimers()
+        })
+
+        it('should close after the duration', () => {
+            vi.useFakeTimers()
+            const params = {
+                message: 'message',
+                duration: 1000,
+                onClose: vi.fn()
+            }
+            new ToastProgrammatic().open(params)
+            vi.advanceTimersByTime(500)
+            expect(params.onClose).not.toHaveBeenCalled()
+            vi.advanceTimersByTime(500)
+            expect(params.onClose).toHaveBeenCalled()
+        })
+
+        it('indefinitely should be able to be manually closed', () => {
+            vi.useFakeTimers()
+            const params = {
+                message: 'message',
+                indefinite: true,
+                onClose: vi.fn()
+            }
+            const toast = new ToastProgrammatic().open(params)
+            vi.advanceTimersByTime(10000)
+            expect(params.onClose).not.toHaveBeenCalled()
+            toast.close()
+            expect(params.onClose).toHaveBeenCalled()
+        })
+    })
+})

package/src/components/toast/Toast.vue

@@ -0,0 +1,46 @@
+<template>
+    <transition
+        :enter-active-class="transition.enter"
+        :leave-active-class="transition.leave"
+    >
+        <div
+            @mouseenter="pause"
+            @mouseleave="removePause"
+            v-show="isActive"
+            class="toast"
+            :class="[type, position]"
+            :aria-hidden="!isActive"
+            role="alert"
+        >
+            <template v-if="$slots.default">
+                <slot />
+            </template>
+            <template v-else>
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <div v-html="message" />
+            </template>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import config from '../../utils/config'
+import type { ExtractComponentProps } from '../../utils/helpers'
+import NoticeMixin from '../../utils/NoticeMixin'
+
+const Toast = defineComponent({
+    name: 'BToast',
+    mixins: [NoticeMixin],
+    data() {
+        return {
+            newDuration: this.duration || config.defaultToastDuration
+        }
+    }
+})
+
+export type ToastProps = ExtractComponentProps<typeof Toast>
+
+export default Toast
+</script>

package/src/components/toast/__snapshots__/Toast.spec.ts.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BToast > render correctly 1`] = `
+"<transition-stub enteractiveclass="fadeInDown" leaveactiveclass="fadeOut" appear="false" persisted="true" css="true">
+  <div class="toast is-dark is-top" aria-hidden="false" role="alert" style="">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div></div>
+  </div>
+</transition-stub>"
+`;

package/src/components/toast/index.ts

@@ -0,0 +1,120 @@
+import { createApp, h as createElement } from 'vue'
+import type { App, ComponentPublicInstance, VNode } from 'vue'
+
+import Toast from './Toast.vue'
+import type { ToastProps } from './Toast.vue'
+
+import config from '../../utils/config'
+import { copyAppContext, getComponentFromVNode } from '../../utils/helpers'
+import { registerComponentProgrammatic } from '../../utils/plugins'
+
+export type ToastOpenParams = Omit<ToastProps, 'message'> & {
+    // programmatically opened toast can have VNode(s) as the message
+    message?: string | VNode | (string | VNode)[],
+    onClose?: () => void
+}
+
+// Minimal definition of a programmatically opened toast.
+//
+// ESLint does not like `{}` as a type but allowed here to make them look
+// similar to Vue's definition.
+/* eslint-disable @typescript-eslint/ban-types */
+type ToastProgrammaticInstance = ComponentPublicInstance<
+    {}, // P
+    {}, // B
+    {}, // D
+    {}, // C
+    { close: () => void } // M
+>
+/* eslint-enable @typescript-eslint/ban-types */
+
+class ToastProgrammatic {
+    private app: App | undefined
+
+    constructor(app?: App) {
+        this.app = app // may be undefined in the testing environment
+    }
+
+    open(params: string | ToastOpenParams) {
+        if (typeof params === 'string') {
+            params = {
+                message: params
+            }
+        }
+
+        let slot: ToastOpenParams['message']
+        let { message, ...restParams } = params
+        if (typeof message !== 'string') {
+            slot = message
+            message = undefined
+        }
+        const propsData: ToastProps = {
+            position: config.defaultToastPosition || 'is-top',
+            message,
+            ...restParams
+        }
+        const container = document.createElement('div')
+        // Vue 3 requires a new app to mount another component
+        const vueInstance = createApp({
+            data() {
+                return {
+                    toastVNode: null
+                }
+            },
+            methods: {
+                close() {
+                    const toast = getComponentFromVNode(this.toastVNode)
+                    if (toast) {
+                        (toast as InstanceType<typeof Toast>).close()
+                    }
+                }
+            },
+            render() {
+                this.toastVNode = createElement(
+                    Toast,
+                    {
+                        ...propsData,
+                        // On Vue 3, $destroy is no longer available.
+                        // A toast has to be unmounted manually.
+                        onClose: () => {
+                            if (typeof propsData.onClose === 'function') {
+                                propsData.onClose()
+                            }
+                            // timeout for the animation complete
+                            // before unmounting
+                            setTimeout(() => {
+                                vueInstance.unmount()
+                            }, 150)
+                        }
+                    },
+                    slot != null ? { default: () => slot } : undefined
+                )
+                // we are interested in `toastVNode.component` but
+                // at this point `toastVNode.component` should be null
+                return this.toastVNode
+            }
+        })
+        if (this.app) {
+            copyAppContext(this.app, vueInstance)
+        } else {
+            // adds $buefy global property
+            // so that $buefy.globalNoticeInterval is available on the new Vue app
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            vueInstance.config.globalProperties.$buefy = {} as any
+        }
+        return vueInstance.mount(container) as ToastProgrammaticInstance
+    }
+}
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponentProgrammatic(Vue, 'toast', new ToastProgrammatic(Vue))
+    }
+}
+
+export default Plugin
+
+export {
+    ToastProgrammatic,
+    Toast as BToast
+}

package/src/components/tooltip/Tooltip.spec.ts

@@ -0,0 +1,64 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { MockInstance } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BTooltip from '@components/tooltip/Tooltip.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BTooltip>>
+
+describe('BTooltip', () => {
+    let spyOnOnHover: MockInstance
+    let spyOnOnContextMenu: MockInstance
+    let spyOnOnFocus: MockInstance
+    let spyOnOpen: MockInstance
+
+    beforeEach(() => {
+        // spies on methods before mounting the component
+        // because wrapper.vm does not allow spies
+        spyOnOnHover = vi.spyOn(BTooltip.methods!, 'onHover')
+        spyOnOnContextMenu = vi.spyOn(BTooltip.methods!, 'onContextMenu')
+        spyOnOnFocus = vi.spyOn(BTooltip.methods!, 'onFocus')
+        spyOnOpen = vi.spyOn(BTooltip.methods!, 'open')
+        wrapper = shallowMount(BTooltip)
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BTooltip')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('tests isActive watch', async () => {
+        await wrapper.setProps({ appendToBody: true })
+        await wrapper.setData({
+            updateAppendToBody: vi.fn(),
+            isActive: true
+        })
+        expect(wrapper.vm.updateAppendToBody).toHaveBeenCalled()
+        expect(wrapper.emitted().open).toBeTruthy()
+    })
+
+    it('tests onHover method', async () => {
+        await wrapper.setProps({ triggers: ['hover'] })
+        wrapper.vm.onHover()
+        expect(spyOnOnHover).toHaveBeenCalled()
+        expect(spyOnOpen).toHaveBeenCalled()
+    })
+
+    it('tests onContextMenu method', async () => {
+        await wrapper.setProps({ triggers: ['contextmenu'] })
+        wrapper.vm.onContextMenu({ preventDefault: vi.fn() })
+        expect(spyOnOnContextMenu).toHaveBeenCalled()
+        expect(spyOnOpen).toHaveBeenCalled()
+    })
+
+    it('tests onFocus method', async () => {
+        await wrapper.setProps({ triggers: ['focus'] })
+        wrapper.vm.onFocus()
+        expect(spyOnOnFocus).toHaveBeenCalled()
+        expect(spyOnOpen).toHaveBeenCalled()
+    })
+})