Merge branch 'dev' into ts-rollout-tier-8-notification

ntohq · Jan 11, 2025 · e50b5d5 · e50b5d5
2 parents 18fda87 + 51360d8
commit e50b5d5
Show file tree

Hide file tree

Showing 36 changed files with 373 additions and 224 deletions.
diff --git a/packages/buefy-next/rollup.config.mjs b/packages/buefy-next/rollup.config.mjs
@@ -35,12 +35,9 @@ const JS_COMPONENTS = [
     'colorpicker',
     'datepicker',
     'datetimepicker',
-    'dialog',
     'numberinput',
-    'select',
     'table',
     'timepicker',
-    'upload',
 ]
 
 const entries = {

diff --git a/...next/src/components/dialog/Dialog.spec.js → ...next/src/components/dialog/Dialog.spec.ts b/...next/src/components/dialog/Dialog.spec.js → ...next/src/components/dialog/Dialog.spec.ts
@@ -1,11 +1,13 @@
 import { shallowMount } from '@vue/test-utils'
-import BDialog from '@components/dialog/Dialog'
+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
+let wrapper: VueWrapper<InstanceType<typeof BDialog>>
 
 describe('BDialog', () => {
-    HTMLElement.prototype.focus = jest.fn()
+    HTMLElement.prototype.focus = vi.fn()
     beforeEach(() => {
         wrapper = shallowMount(BDialog, {
             attachTo: document.body
@@ -19,7 +21,7 @@ describe('BDialog', () => {
 
     it('gives focus to the input element if it contains one', async () => {
         await wrapper.setProps({ hasInput: true })
-        expect(wrapper.vm.$refs.input.focus).toHaveBeenCalled()
+        expect((wrapper.vm.$refs.input as HTMLInputElement).focus).toHaveBeenCalled()
     })
 
     it('manage default config props values', () => {
@@ -60,16 +62,16 @@ describe('BDialog', () => {
     })
 
     it('close on confirm', async () => {
-        await wrapper.setProps({ confirmCallback: jest.fn() })
+        await wrapper.setProps({ confirmCallback: vi.fn() })
         wrapper.vm.confirm()
         expect(wrapper.vm.isActive).toBeFalsy()
         expect(wrapper.vm.confirmCallback).toHaveBeenCalled()
-        expect(wrapper.emitted().confirm).toEqual([['']])
+        expect(wrapper.emitted<string[]>().confirm[0][0]).toEqual('')
     })
 
     it('async confirm and keep Loading state', async () => {
         await wrapper.setProps({
-            confirmCallback: jest.fn((confirmValue, { startLoading }) => {
+            confirmCallback: vi.fn((confirmValue, { startLoading }) => {
                 startLoading()
                 expect(wrapper.vm.isLoading).toBeTruthy()
             }),
@@ -83,7 +85,7 @@ describe('BDialog', () => {
 
     it('async confirm and close Loading state', async () => {
         await wrapper.setProps({
-            confirmCallback: jest.fn((confirmValue, { startLoading, cancelLoading }) => {
+            confirmCallback: vi.fn((confirmValue, { startLoading, cancelLoading }) => {
                 startLoading()
                 expect(wrapper.vm.isLoading).toBeTruthy()
                 cancelLoading()
@@ -97,10 +99,10 @@ describe('BDialog', () => {
     })
 
     it('closeOnConfirm prop equals false', async () => {
-        await wrapper.setProps({ confirmCallback: jest.fn(), closeOnConfirm: false })
+        await wrapper.setProps({ confirmCallback: vi.fn(), closeOnConfirm: false })
         wrapper.vm.confirm()
         expect(wrapper.vm.isActive).toBeTruthy()
         expect(wrapper.vm.confirmCallback).toHaveBeenCalled()
-        expect(wrapper.emitted().confirm).toEqual([['']])
+        expect(wrapper.emitted<string[]>().confirm[0][0]).toEqual('')
     })
 })
diff --git a/packages/buefy-next/src/components/dialog/Dialog.vue b/packages/buefy-next/src/components/dialog/Dialog.vue
@@ -26,7 +26,7 @@
                             v-if="hasIcon && (icon || iconByType)"
                         >
                             <b-icon
-                                :icon="icon ? icon : iconByType"
+                                :icon="icon ? icon : iconByType!"
                                 :pack="iconPack"
                                 :type="type"
                                 :both="!icon"
@@ -88,19 +88,25 @@
     </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
@@ -139,7 +145,9 @@ export default {
             default: () => ({})
         },
         confirmCallback: {
-            type: Function,
+            // 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: {
@@ -155,25 +163,15 @@ 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 */
     },
-    emits: ['confirm'],
     data() {
         const prompt = this.hasInput
             ? this.inputAttrs.value || ''
@@ -204,7 +202,7 @@ export default {
                 'has-custom-container': this.container !== null
             }]
         },
-        /**
+        /*
         * Icon name (MDI) based on the type.
         */
         iconByType() {
@@ -226,25 +224,26 @@ export default {
         }
     },
     methods: {
-        /**
+        /*
         * If it's a prompt Dialog, validate the input.
         * 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.$emit('confirm', this.prompt, this)
             this.confirmCallback(this.prompt, this)
             if (this.closeOnConfirm) this.close()
         },
 
-        /**
+        /*
         * Close the Dialog.
         */
         close() {
@@ -285,13 +284,17 @@ export default {
         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>