type: Add component prop typesafety to dialogs

src/stores/dialogStore.ts

@@ -7,6 +7,7 @@ import { markRaw, ref } from 'vue'
 import type { Component } from 'vue'
 
 import type GlobalDialog from '@/components/dialog/GlobalDialog.vue'
+import type { ComponentAttrs } from 'vue-component-type-helpers'
 
 type DialogPosition =
   | 'center'
@@ -33,30 +34,39 @@ interface CustomDialogComponentProps {
   headless?: boolean
 }
 
-export type DialogComponentProps = InstanceType<typeof GlobalDialog>['$props'] &
+export type DialogComponentProps = ComponentAttrs<typeof GlobalDialog> &
   CustomDialogComponentProps
 
-interface DialogInstance {
+interface DialogInstance<
+  H extends Component = Component,
+  B extends Component = Component,
+  F extends Component = Component
+> {
   key: string
   visible: boolean
   title?: string
-  headerComponent?: Component
-  component: Component
-  contentProps: Record<string, any>
-  footerComponent?: Component
-  footerProps?: Record<string, any>
+  headerComponent?: H
+  component: B
+  contentProps: ComponentAttrs<B>
+  footerComponent?: F
+  footerProps?: ComponentAttrs<F>
   dialogComponentProps: DialogComponentProps
   priority: number
 }
 
-export interface ShowDialogOptions {
+export interface ShowDialogOptions<
+  H extends Component = Component,
+  B extends Component = Component,
+  F extends Component = Component
+> {
   key?: string
   title?: string
-  headerComponent?: Component
-  footerComponent?: Component
-  component: Component
-  props?: Record<string, any>
-  footerProps?: Record<string, any>
+  headerComponent?: H
+  footerComponent?: F
+  component: B
+  props?: ComponentAttrs<B>
+  headerProps?: ComponentAttrs<H>
+  footerProps?: ComponentAttrs<F>
   dialogComponentProps?: DialogComponentProps
   /**
    * Optional priority for dialog stacking.
@@ -203,7 +213,11 @@ export const useDialogStore = defineStore('dialog', () => {
     })
   }
 
-  function showDialog(options: ShowDialogOptions) {
+  function showDialog<
+    H extends Component = Component,
+    B extends Component = Component,
+    F extends Component = Component
+  >(options: ShowDialogOptions<H, B, F>) {
     const dialogKey = options.key || genDialogKey()
 
     let dialog = dialogStack.value.find((d) => d.key === dialogKey)