buefy 1.0.0 → 1.0.2

package/src/components/dialog/Dialog.spec.ts

@@ -0,0 +1,108 @@
+import { shallowMount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import BDialog from '@components/dialog/Dialog.vue'
+import config, { setOptions } from '@utils/config'
+
+let wrapper: VueWrapper<InstanceType<typeof BDialog>>
+
+describe('BDialog', () => {
+    HTMLElement.prototype.focus = vi.fn()
+    beforeEach(() => {
+        wrapper = shallowMount(BDialog, {
+            attachTo: document.body
+        })
+    })
+
+    it('is called', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BDialog')
+    })
+
+    it('gives focus to the input element if it contains one', async () => {
+        await wrapper.setProps({ hasInput: true })
+        expect((wrapper.vm.$refs.input as HTMLInputElement).focus).toHaveBeenCalled()
+    })
+
+    it('manage default config props values', () => {
+        setOptions(Object.assign(config, {
+            defaultDialogConfirmText: 'foo',
+            defaultDialogCancelText: 'bar'
+        }))
+        wrapper = shallowMount(BDialog)
+
+        expect(wrapper.vm.confirmText).toEqual(config.defaultDialogConfirmText)
+        expect(wrapper.vm.cancelText).toEqual(config.defaultDialogCancelText)
+    })
+
+    it('manage props validator', () => {
+        const ariaRole = wrapper.vm.$options.props.ariaRole
+
+        expect(ariaRole.type).toBe(String)
+        expect(ariaRole.validator && ariaRole.validator('d')).toBeFalsy()
+        expect(ariaRole.validator && ariaRole.validator('dialog')).toBeTruthy()
+        expect(ariaRole.validator && ariaRole.validator('alertdialog')).toBeTruthy()
+    })
+
+    it('manage icons', async () => {
+        await wrapper.setProps({ type: 'is-info' })
+        expect(wrapper.vm.iconByType).toBe('information')
+
+        await wrapper.setProps({ type: 'is-success' })
+        expect(wrapper.vm.iconByType).toBe('check-circle')
+
+        await wrapper.setProps({ type: 'is-warning' })
+        expect(wrapper.vm.iconByType).toBe('alert')
+
+        await wrapper.setProps({ type: 'is-danger' })
+        expect(wrapper.vm.iconByType).toBe('alert-circle')
+
+        await wrapper.setProps({ type: 'is-primary' })
+        expect(wrapper.vm.iconByType).toBeNull()
+    })
+
+    it('close on confirm', async () => {
+        await wrapper.setProps({ confirmCallback: vi.fn() })
+        wrapper.vm.confirm()
+        expect(wrapper.vm.isActive).toBeFalsy()
+        expect(wrapper.vm.confirmCallback).toHaveBeenCalled()
+        expect(wrapper.emitted<string[]>().confirm[0][0]).toEqual('')
+    })
+
+    it('async confirm and keep Loading state', async () => {
+        await wrapper.setProps({
+            confirmCallback: vi.fn((confirmValue, { startLoading }) => {
+                startLoading()
+                expect(wrapper.vm.isLoading).toBeTruthy()
+            }),
+            closeOnConfirm: false
+        })
+        expect(wrapper.vm.isLoading).toBeFalsy()
+        wrapper.vm.confirm()
+        expect(wrapper.vm.isLoading).toBeTruthy()
+        expect(wrapper.vm.confirmCallback).toHaveBeenCalled()
+    })
+
+    it('async confirm and close Loading state', async () => {
+        await wrapper.setProps({
+            confirmCallback: vi.fn((confirmValue, { startLoading, cancelLoading }) => {
+                startLoading()
+                expect(wrapper.vm.isLoading).toBeTruthy()
+                cancelLoading()
+            }),
+            closeOnConfirm: false
+        })
+        expect(wrapper.vm.isLoading).toBeFalsy()
+        wrapper.vm.confirm()
+        expect(wrapper.vm.isLoading).toBeFalsy()
+        expect(wrapper.vm.confirmCallback).toHaveBeenCalled()
+    })
+
+    it('closeOnConfirm prop equals false', async () => {
+        await wrapper.setProps({ confirmCallback: vi.fn(), closeOnConfirm: false })
+        wrapper.vm.confirm()
+        expect(wrapper.vm.isActive).toBeTruthy()
+        expect(wrapper.vm.confirmCallback).toHaveBeenCalled()
+        expect(wrapper.emitted<string[]>().confirm[0][0]).toEqual('')
+    })
+})

package/src/components/dialog/Dialog.vue

@@ -0,0 +1,300 @@
+<template>
+    <transition :name="animation">
+        <div
+            v-if="isActive"
+            class="dialog modal is-active"
+            :class="dialogClass"
+            v-trap-focus="trapFocus"
+            :role="ariaRole"
+            :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>
+                </header>
+
+                <section
+                    class="modal-card-body"
+                    :class="{ 'is-titleless': !title, 'is-flex': hasIcon }"
+                >
+                    <div class="media">
+                        <div
+                            class="media-left"
+                            v-if="hasIcon && (icon || iconByType)"
+                        >
+                            <b-icon
+                                :icon="icon ? icon : iconByType!"
+                                :pack="iconPack"
+                                :type="type"
+                                :both="!icon"
+                                size="is-large"
+                            />
+                        </div>
+                        <div class="media-content">
+                            <p>
+                                <template v-if="$slots.default">
+                                    <slot />
+                                </template>
+                                <template v-else>
+                                    <!-- eslint-disable-next-line vue/no-v-html -->
+                                    <div v-html="message" />
+                                </template>
+                            </p>
+
+                            <div v-if="hasInput" class="field">
+                                <div class="control">
+                                    <input
+                                        v-model="prompt"
+                                        class="input"
+                                        ref="input"
+                                        :class="{ 'is-danger': validationMessage }"
+                                        v-bind="safeInputAttrs"
+                                        @compositionstart="isCompositing = true"
+                                        @compositionend="isCompositing = false"
+                                        @keydown.enter="confirm"
+                                    >
+                                </div>
+                                <p class="help is-danger">
+                                    {{ validationMessage }}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <footer class="modal-card-foot">
+                    <b-button
+                        v-if="showCancel"
+                        ref="cancelButton"
+                        :disabled="isLoading"
+                        @click="cancel('button')"
+                    >
+                        {{ cancelText }}
+                    </b-button>
+                    <b-button
+                        :type="type"
+                        ref="confirmButton"
+                        :loading="isLoading"
+                        @click="confirm"
+                    >
+                        {{ confirmText }}
+                    </b-button>
+                </footer>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import trapFocus from '../../directives/trapFocus'
+import BIcon from '../icon/Icon.vue'
+import Modal from '../modal/Modal.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>
+
+const Dialog = defineComponent({
+    name: 'BDialog',
+    components: {
+        BIcon,
+        BButton
+    },
+    directives: {
+        trapFocus
+    },
+    extends: Modal,
+    props: {
+        title: String,
+        message: [String, Array],
+        icon: String,
+        iconPack: String,
+        hasIcon: Boolean,
+        type: {
+            type: String,
+            default: 'is-primary'
+        },
+        size: String,
+        confirmText: {
+            type: String,
+            default: () => {
+                return config.defaultDialogConfirmText
+                    ? config.defaultDialogConfirmText
+                    : 'OK'
+            }
+        },
+        cancelText: {
+            type: String,
+            default: () => {
+                return config.defaultDialogCancelText
+                    ? config.defaultDialogCancelText
+                    : 'Cancel'
+            }
+        },
+        hasInput: Boolean, // Used internally to know if it's prompt
+        inputAttrs: {
+            type: Object,
+            default: () => ({})
+        },
+        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: {
+            type: Boolean,
+            default: true
+        },
+        container: {
+            type: String,
+            default: () => {
+                return config.defaultContainerElement
+            }
+        },
+        focusOn: {
+            type: String,
+            default: 'confirm'
+        }
+    },
+    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
+            ? this.inputAttrs.value || ''
+            : ''
+
+        return {
+            prompt,
+            isActive: false,
+            validationMessage: '',
+            isCompositing: false,
+            isLoading: false
+        }
+    },
+    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() {
+            switch (this.type) {
+                case 'is-info':
+                    return 'information'
+                case 'is-success':
+                    return 'check-circle'
+                case 'is-warning':
+                    return 'alert'
+                case 'is-danger':
+                    return 'alert-circle'
+                default:
+                    return null
+            }
+        },
+        showCancel() {
+            return this.cancelOptions.indexOf('button') >= 0
+        }
+    },
+    methods: {
+        /*
+        * If it's a prompt Dialog, validate the input.
+        * Call the confirmCallback prop (function) and close the Dialog.
+        */
+        confirm() {
+            const input = this.$refs.input as HTMLInputElement
+            if (input != null) {
+                if (this.isCompositing) return
+                if (!input.checkValidity()) {
+                    this.validationMessage = input.validationMessage
+                    this.$nextTick(() => input.select())
+                    return
+                }
+            }
+            this.$emit('confirm', this.prompt, this)
+            this.confirmCallback(this.prompt, this)
+            if (this.closeOnConfirm) this.close()
+        },
+
+        /*
+        * Close the Dialog.
+        */
+        close() {
+            this.isActive = false
+            this.isLoading = false
+            // Timeout for the animation complete before destroying
+            setTimeout(() => {
+                removeElement(this.$el)
+            }, 150)
+        },
+
+        /*
+        * Start the Loading.
+        */
+        startLoading() {
+            this.isLoading = true
+        },
+
+        /*
+        * Cancel the Loading.
+        */
+        cancelLoading() {
+            this.isLoading = false
+        }
+    },
+    beforeMount() {
+        // Insert the Dialog component in the element container
+        if (typeof window !== 'undefined') {
+            this.$nextTick(() => {
+                const container = document.querySelector(this.container) || document.body
+                container.appendChild(this.$el)
+            })
+        }
+    },
+    mounted() {
+        this.isActive = true
+
+        this.$nextTick(() => {
+            // Handle which element receives focus
+            if (this.hasInput) {
+                (this.$refs.input as HTMLInputElement).focus()
+            } else if (this.focusOn === 'cancel' && this.showCancel) {
+                (this.$refs.cancelButton as BButtonInstance).$el.focus()
+            } else {
+                (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
+}