buefy 0.9.29 → 1.0.1

package/src/components/dialog/Dialog.vue

@@ -6,26 +6,32 @@
             :class="dialogClass"
             v-trap-focus="trapFocus"
             :role="ariaRole"
-            :aria-modal="ariaModal">
-            <div class="modal-background" @click="cancel('outside')"/>
+            :aria-modal="ariaModal"
+        >
+            <div class="modal-background" @click="cancel('outside')" />
             <div class="modal-card animation-content">
                 <header class="modal-card-head" v-if="title">
-                    <p class="modal-card-title">{{ title }}</p>
+                    <p class="modal-card-title">
+                        {{ title }}
+                    </p>
                 </header>
 
                 <section
                     class="modal-card-body"
-                    :class="{ 'is-titleless': !title, 'is-flex': hasIcon }">
+                    :class="{ 'is-titleless': !title, 'is-flex': hasIcon }"
+                >
                     <div class="media">
                         <div
                             class="media-left"
-                            v-if="hasIcon && (icon || iconByType)">
+                            v-if="hasIcon && (icon || iconByType)"
+                        >
                             <b-icon
-                                :icon="icon ? icon : iconByType"
+                                :icon="icon ? icon : iconByType!"
                                 :pack="iconPack"
                                 :type="type"
                                 :both="!icon"
-                                size="is-large"/>
+                                size="is-large"
+                            />
                         </div>
                         <div class="media-content">
                             <p>
@@ -33,6 +39,7 @@
                                     <slot />
                                 </template>
                                 <template v-else>
+                                    <!-- eslint-disable-next-line vue/no-v-html -->
                                     <div v-html="message" />
                                 </template>
                             </p>
@@ -44,12 +51,15 @@
                                         class="input"
                                         ref="input"
                                         :class="{ 'is-danger': validationMessage }"
-                                        v-bind="inputAttrs"
+                                        v-bind="safeInputAttrs"
                                         @compositionstart="isCompositing = true"
                                         @compositionend="isCompositing = false"
-                                        @keydown.enter="confirm">
+                                        @keydown.enter="confirm"
+                                    >
                                 </div>
-                                <p class="help is-danger">{{ validationMessage }}</p>
+                                <p class="help is-danger">
+                                    {{ validationMessage }}
+                                </p>
                             </div>
                         </div>
                     </div>
@@ -60,31 +70,43 @@
                         v-if="showCancel"
                         ref="cancelButton"
                         :disabled="isLoading"
-                        @click="cancel('button')">{{ cancelText }}</b-button>
+                        @click="cancel('button')"
+                    >
+                        {{ cancelText }}
+                    </b-button>
                     <b-button
                         :type="type"
                         ref="confirmButton"
                         :loading="isLoading"
-                        @click="confirm">{{ confirmText }}</b-button>
+                        @click="confirm"
+                    >
+                        {{ confirmText }}
+                    </b-button>
                 </footer>
             </div>
         </div>
     </transition>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
 import trapFocus from '../../directives/trapFocus'
-import Icon from '../icon/Icon.vue'
+import BIcon from '../icon/Icon.vue'
 import Modal from '../modal/Modal.vue'
-import Button from '../button/Button.vue'
+import BButton from '../button/Button.vue'
 import config from '../../utils/config'
 import { removeElement } from '../../utils/helpers'
+import type { ExtractComponentProps } from '../../utils/helpers'
+
+type BButtonInstance = InstanceType<typeof BButton>
 
-export default {
+const Dialog = defineComponent({
     name: 'BDialog',
     components: {
-        [Icon.name]: Icon,
-        [Button.name]: Button
+        BIcon,
+        BButton
     },
     directives: {
         trapFocus
@@ -122,8 +144,10 @@ export default {
             type: Object,
             default: () => ({})
         },
-        onConfirm: {
-            type: Function,
+        confirmCallback: {
+            // I was not able to figure out how to specify the "self" type here
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            type: Function as PropType<(value: string, dialog: any) => void>,
             default: () => {}
         },
         closeOnConfirm: {
@@ -139,23 +163,14 @@ export default {
         focusOn: {
             type: String,
             default: 'confirm'
-        },
-        trapFocus: {
-            type: Boolean,
-            default: () => {
-                return config.defaultTrapFocus
-            }
-        },
-        ariaRole: {
-            type: String,
-            validator: (value) => {
-                return [
-                    'dialog',
-                    'alertdialog'
-                ].indexOf(value) >= 0
-            }
-        },
-        ariaModal: Boolean
+        }
+    },
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */
+        // second parameter is the dialog instance but typed any
+        // because I was not able to figure out how to specify the "self" type here
+        confirm: (value: string, dialog: any) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */
     },
     data() {
         const prompt = this.hasInput
@@ -171,12 +186,23 @@ export default {
         }
     },
     computed: {
+        // `safeInputAttrs` is a shallow copy of `inputAttrs` except for `value`
+        // `value` should not be specified to `v-bind` of the input element
+        // because it inhibits `v-model` of the input on Vue 3
+        safeInputAttrs() {
+            const attrs = { ...this.inputAttrs }
+            delete attrs.value
+            if (typeof attrs.required === 'undefined') {
+                attrs.required = true
+            }
+            return attrs
+        },
         dialogClass() {
             return [this.size, {
                 'has-custom-container': this.container !== null
             }]
         },
-        /**
+        /*
         * Icon name (MDI) based on the type.
         */
         iconByType() {
@@ -198,25 +224,26 @@ export default {
         }
     },
     methods: {
-        /**
+        /*
         * If it's a prompt Dialog, validate the input.
-        * Call the onConfirm prop (function) and close the Dialog.
+        * Call the confirmCallback prop (function) and close the Dialog.
         */
         confirm() {
-            if (this.$refs.input !== undefined) {
+            const input = this.$refs.input as HTMLInputElement
+            if (input != null) {
                 if (this.isCompositing) return
-                if (!this.$refs.input.checkValidity()) {
-                    this.validationMessage = this.$refs.input.validationMessage
-                    this.$nextTick(() => this.$refs.input.select())
+                if (!input.checkValidity()) {
+                    this.validationMessage = input.validationMessage
+                    this.$nextTick(() => input.select())
                     return
                 }
             }
-            this.$emit('confirm', this.prompt)
-            this.onConfirm(this.prompt, this)
+            this.$emit('confirm', this.prompt, this)
+            this.confirmCallback(this.prompt, this)
             if (this.closeOnConfirm) this.close()
         },
 
-        /**
+        /*
         * Close the Dialog.
         */
         close() {
@@ -224,19 +251,18 @@ export default {
             this.isLoading = false
             // Timeout for the animation complete before destroying
             setTimeout(() => {
-                this.$destroy()
                 removeElement(this.$el)
             }, 150)
         },
 
-        /**
+        /*
         * Start the Loading.
         */
         startLoading() {
             this.isLoading = true
         },
 
-        /**
+        /*
         * Cancel the Loading.
         */
         cancelLoading() {
@@ -255,20 +281,20 @@ export default {
     mounted() {
         this.isActive = true
 
-        if (typeof this.inputAttrs.required === 'undefined') {
-            this.$set(this.inputAttrs, 'required', true)
-        }
-
         this.$nextTick(() => {
             // Handle which element receives focus
             if (this.hasInput) {
-                this.$refs.input.focus()
+                (this.$refs.input as HTMLInputElement).focus()
             } else if (this.focusOn === 'cancel' && this.showCancel) {
-                this.$refs.cancelButton.$el.focus()
+                (this.$refs.cancelButton as BButtonInstance).$el.focus()
             } else {
-                this.$refs.confirmButton.$el.focus()
+                (this.$refs.confirmButton as BButtonInstance).$el.focus()
             }
         })
     }
-}
+})
+
+export type DialogProps = ExtractComponentProps<typeof Dialog>
+
+export default Dialog
 </script>

package/src/components/dialog/index.ts

@@ -0,0 +1,169 @@
+import { createApp, h as createElement } from 'vue'
+import type { App, ComponentPublicInstance } from 'vue'
+
+import Dialog from './Dialog.vue'
+import type { DialogProps } from './Dialog.vue'
+
+import config from '../../utils/config'
+import type { ModalCancellableOption } from '../../utils/config'
+import { copyAppContext, getComponentFromVNode } from '../../utils/helpers'
+import { registerComponent, registerComponentProgrammatic } from '../../utils/plugins'
+
+type DialogInstance = InstanceType<typeof Dialog>
+
+export type DialogOpenParams = Omit<
+    DialogProps,
+    'programmatic' | 'cancelCallback' | 'confirmCallback'
+> & {
+    onConfirm?: (value: string, dialog: DialogInstance) => void
+    onCancel?: (method: ModalCancellableOption) => void
+}
+
+// Minimal definition of a programmatically opened dialog.
+//
+// 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 DialogProgrammaticInstance = ComponentPublicInstance<
+    {}, // P
+    {}, // B
+    {}, // D
+    {}, // C
+    { close: () => void } // M
+>
+
+function open(propsData: DialogProps, app?: App) {
+    let slot: DialogProps['message']
+    if (Array.isArray(propsData.message)) {
+        slot = propsData.message
+        delete propsData.message
+    }
+    function createDialog(
+        onConfirm?: (value: string) => void,
+        onCancel?: (method: ModalCancellableOption) => void
+    ) {
+        const container = document.createElement('div')
+        // Vue 3 requires a new app to mount another component
+        const vueInstance = createApp({
+            data() {
+                return {
+                    dialogVNode: null
+                }
+            },
+            methods: {
+                close() {
+                    const dialog = getComponentFromVNode(this.dialogVNode)
+                    if (dialog) {
+                        (dialog as DialogInstance).close()
+                    }
+                },
+                startLoading() {
+                    const dialog = getComponentFromVNode(this.dialogVNode)
+                    if (dialog) {
+                        (dialog as DialogInstance).startLoading()
+                    }
+                },
+                cancelLoading() {
+                    const dialog = getComponentFromVNode(this.dialogVNode)
+                    if (dialog) {
+                        (dialog as DialogInstance).cancelLoading()
+                    }
+                }
+            },
+            render() {
+                this.dialogVNode = createElement(
+                    Dialog,
+                    {
+                        ...propsData,
+                        // intentionally overrides propsData.onConfirm
+                        // to prevent propsData.onConfirm from receiving a "confirm" event
+                        onConfirm: (value: string) => {
+                            if (onConfirm != null) {
+                                onConfirm(value)
+                            }
+                        },
+                        // intentionally override propsData.onCancel
+                        // to prevent propsData.onCancel from receiving a "cancel" event
+                        onCancel: (method: ModalCancellableOption) => {
+                            if (onCancel != null) {
+                                onCancel(method)
+                            }
+                            vueInstance.unmount()
+                        },
+                        confirmCallback: (value: string, dialog: DialogInstance) => {
+                            if (propsData.onConfirm != null) {
+                                propsData.onConfirm(value, dialog)
+                            }
+                        },
+                        cancelCallback: (method: ModalCancellableOption) => {
+                            if (propsData.onCancel != null) {
+                                propsData.onCancel(method)
+                            }
+                        }
+                    },
+                    slot ? { default: () => slot } : undefined
+                )
+                return this.dialogVNode
+            }
+        })
+        if (app) {
+            copyAppContext(app, vueInstance)
+        }
+        return vueInstance.mount(container) as DialogProgrammaticInstance
+    }
+    if (!config.defaultProgrammaticPromise) {
+        return createDialog()
+    } else {
+        return new Promise((resolve) => {
+            const dialog = createDialog(
+                (event) => resolve({ result: event || true, dialog }),
+                () => resolve({ result: false, dialog }))
+        })
+    }
+}
+
+class DialogProgrammatic {
+    private app: App | undefined
+
+    constructor(app?: App) {
+        this.app = app // may be undefined in the testing environment
+    }
+
+    alert(params: string | DialogOpenParams) {
+        let newParams: DialogOpenParams
+        if (typeof params === 'string') {
+            newParams = {
+                message: params
+            }
+        } else {
+            newParams = params
+        }
+        newParams = {
+            canCancel: false,
+            ...newParams
+        }
+        return open(newParams, this.app)
+    }
+
+    confirm(params: DialogOpenParams) {
+        return open(params, this.app)
+    }
+
+    prompt(params: DialogOpenParams) {
+        return open({ hasInput: true, ...params }, this.app)
+    }
+}
+
+const Plugin = {
+    install(Vue: App) {
+        registerComponent(Vue, Dialog)
+        registerComponentProgrammatic(Vue, 'dialog', new DialogProgrammatic(Vue))
+    }
+}
+
+export default Plugin
+
+export {
+    DialogProgrammatic,
+    Dialog as BDialog
+}

package/src/components/dropdown/Dropdown.spec.ts

@@ -0,0 +1,229 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BDropdown from '@components/dropdown/Dropdown.vue'
+
+describe('BDropdown', () => {
+    const val1 = 'val1'
+    const val2 = 'val2'
+    let wrapper: VueWrapper<InstanceType<typeof BDropdown>>
+
+    beforeEach(() => {
+        wrapper = shallowMount(BDropdown, {
+            slots: {
+                trigger: '<button class="trigger">trigger</button>'
+            }
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BDropdown')
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('manage props validator', () => {
+        const position = wrapper.vm.$options.props.position
+
+        expect(position.type).toBe(String)
+        expect(position.validator && position.validator('is-top')).toBeFalsy()
+        expect(position.validator && position.validator('is-top-left')).toBeTruthy()
+        expect(position.validator && position.validator('is-top-right')).toBeTruthy()
+        expect(position.validator && position.validator('is-bottom-left')).toBeTruthy()
+    })
+
+    it('react accordingly when changing v-model', async () => {
+        const value = 'value'
+        await wrapper.setProps({ modelValue: value })
+        expect(wrapper.vm.selected).toBe(value)
+    })
+
+    it('emit activity when it changes', async () => {
+        wrapper.vm.updateAppendToBody = vi.fn(() => wrapper.vm.updateAppendToBody)
+        await wrapper.setProps({ appendToBody: true })
+
+        await wrapper.setData({ isActive: true })
+        expect(wrapper.emitted()['active-change']).toBeTruthy()
+
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.updateAppendToBody).toHaveBeenCalled()
+    })
+
+    it('react accordingly on mouse over', async () => {
+        const trigger = wrapper.find({ ref: 'trigger' })
+        trigger.trigger('mouseenter')
+        expect(wrapper.vm.isHoverable).toBeFalsy()
+
+        await wrapper.setProps({ triggers: ['hover'] })
+        trigger.trigger('mouseenter')
+        expect(wrapper.vm.isHoverable).toBeTruthy()
+    })
+
+    it('react accordingly when new item is selected', async () => {
+        wrapper.vm.selectItem(val1)
+        expect(wrapper.emitted()['update:modelValue']).toHaveLength(1)
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([val1])
+        expect(wrapper.emitted().change).toHaveLength(1)
+        expect(wrapper.emitted().change[0]).toEqual([val1])
+
+        await wrapper.setProps({
+            triggers: ['hover'],
+            closeOnClick: true
+        })
+
+        wrapper.vm.selectItem(val2)
+        expect(wrapper.emitted()['update:modelValue']).toHaveLength(2)
+        expect(wrapper.emitted()['update:modelValue'][1]).toEqual([val2])
+        expect(wrapper.emitted().change).toHaveLength(2)
+        expect(wrapper.emitted().change[1]).toEqual([val2])
+
+        expect(wrapper.vm.isHoverable).toBeFalsy()
+    })
+
+    it('react accordingly when same item is selected', async () => {
+        // will emit only input event
+        await wrapper.setProps({ modelValue: val1 })
+        wrapper.vm.selectItem(val1)
+        expect(wrapper.emitted()['update:modelValue']).toHaveLength(1)
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([val1])
+        expect(wrapper.emitted().change).toBeUndefined()
+    })
+
+    it('react accordingly when an item is selected with multiple prop', async () => {
+        await wrapper.setProps({
+            multiple: true
+        })
+        await wrapper.setData({
+            selected: null
+        })
+
+        // no initial value, will return an array with the only selected option
+        wrapper.vm.selectItem(val1)
+        expect(wrapper.emitted()['update:modelValue']).toHaveLength(1)
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[val1]])
+        expect(wrapper.emitted().change).toHaveLength(1)
+        expect(wrapper.emitted().change[0]).toEqual([[val1]])
+
+        // will return an array with the new value appended
+        await wrapper.setProps({ modelValue: [val1] })
+        wrapper.vm.selectItem(val2)
+        expect(wrapper.emitted()['update:modelValue']).toHaveLength(2)
+        expect(wrapper.emitted()['update:modelValue'][1]).toEqual([[val1, val2]])
+        expect(wrapper.emitted().change).toHaveLength(2)
+        expect(wrapper.emitted().change[1]).toEqual([[val1, val2]])
+
+        // will remove the last selection since it was part of the list
+        await wrapper.setProps({ modelValue: [val1, val2] })
+        wrapper.vm.selectItem(val2)
+        expect(wrapper.emitted()['update:modelValue']).toHaveLength(3)
+        expect(wrapper.emitted()['update:modelValue'][2]).toEqual([[val1]])
+        expect(wrapper.emitted().change).toHaveLength(3)
+        expect(wrapper.emitted().change[2]).toEqual([[val1]])
+    })
+
+    it('manage the whitelisted items accordingly', () => {
+        let el = wrapper.vm.$refs.dropdownMenu as Element
+        expect(wrapper.vm.isInWhiteList(el)).toBeTruthy()
+
+        el = (wrapper.vm.$refs.dropdownMenu as Element).querySelector('.dropdown-content')!
+        expect(wrapper.vm.isInWhiteList(el)).toBeTruthy()
+
+        el = wrapper.vm.$refs.trigger as Element
+        expect(wrapper.vm.isInWhiteList(el)).toBeTruthy()
+
+        el = (wrapper.vm.$refs.trigger as Element).querySelector('.trigger')!
+        expect(wrapper.vm.isInWhiteList(el)).toBeTruthy()
+
+        el = document.createElement('div')
+        expect(wrapper.vm.isInWhiteList(el)).toBeFalsy()
+    })
+
+    it('manage the whitelisted items accordingly without trigger (inline)', async () => {
+        const trigger = wrapper.vm.$refs.trigger as Element
+        expect(trigger).toBeTruthy()
+        const triggerEl = trigger.querySelector('.trigger')
+        expect(triggerEl).toBeTruthy()
+
+        await wrapper.setProps({ inline: true })
+        expect(wrapper.vm.$refs.trigger).toBeFalsy()
+
+        expect(wrapper.vm.isInWhiteList(trigger)).toBeFalsy()
+        expect(wrapper.vm.isInWhiteList(triggerEl)).toBeFalsy()
+
+        const el = document.createElement('div')
+        expect(wrapper.vm.isInWhiteList(el)).toBeFalsy()
+    })
+
+    it('manage clicking outside accordingly', async () => {
+        const el = document.createElement('div')
+        const event = new Event('click')
+        vi.spyOn(event, 'target', 'get').mockReturnValue(el)
+
+        await wrapper.setData({ isActive: true })
+        wrapper.vm.clickedOutside(event)
+        expect(wrapper.vm.isActive).toBeFalsy()
+
+        await wrapper.setData({ isActive: true })
+        const event2 = new Event('click')
+        vi.spyOn(event2, 'target', 'get').mockReturnValue(wrapper.vm.$refs.trigger as Element)
+        wrapper.vm.clickedOutside(event2)
+        expect(wrapper.vm.isActive).toBeTruthy()
+
+        await wrapper.setData({ isActive: true })
+        await wrapper.setProps({ inline: true })
+        wrapper.vm.clickedOutside(event)
+        expect(wrapper.vm.isActive).toBeTruthy()
+
+        await wrapper.setData({ isActive: true })
+        await wrapper.setProps({ canClose: false })
+        wrapper.vm.clickedOutside(event)
+        expect(wrapper.vm.isActive).toBeTruthy()
+    })
+
+    it('close on escape', async () => {
+        await wrapper.setData({ isActive: true })
+        const event = new KeyboardEvent('keyup', { key: 'Escape' })
+        wrapper.vm.keyPress({})
+        wrapper.vm.keyPress(event)
+        expect(wrapper.vm.isActive).toBeFalsy()
+
+        await wrapper.setData({ isActive: true })
+        await wrapper.setProps({ canClose: ['click'] })
+        wrapper.vm.keyPress(event)
+        expect(wrapper.vm.isActive).toBeTruthy()
+    })
+
+    it('manage toggle function accordingly', async () => {
+        await wrapper.setData({ isActive: true })
+        await wrapper.setProps({ disabled: true })
+        wrapper.vm.toggle()
+        expect(wrapper.vm.isActive).toBeTruthy()
+
+        await wrapper.setProps({ disabled: false })
+        wrapper.vm.toggle()
+        expect(wrapper.vm.isActive).toBeFalsy()
+
+        vi.useFakeTimers()
+        vi.spyOn(global, 'setTimeout')
+        await wrapper.setData({ isActive: false })
+        wrapper.vm.toggle()
+        await wrapper.vm.$nextTick()
+        expect(setTimeout).toHaveBeenCalled()
+        expect(wrapper.vm.isActive).toBeFalsy()
+        vi.advanceTimersByTime(1)
+        expect(wrapper.vm.isActive).toBeTruthy()
+        vi.useRealTimers()
+    })
+
+    it('reset events before destroy', () => {
+        document.removeEventListener = vi.fn()
+
+        wrapper.unmount()
+
+        expect(document.removeEventListener).toBeCalledWith('click', expect.any(Function))
+        expect(document.removeEventListener).toBeCalledWith('keyup', expect.any(Function))
+    })
+})