refactor: modal component binding types

components/App/ModalWrapper.vue

@@ -33,6 +33,7 @@ onKeyStroke('Escape', () => emit('close'))
             <span class="i-carbon-close h-6 w-6" aria-hidden="true" />
           </button>
         </div>
+
         <slot />
       </div>
     </div>

components/App/Modals.vue

@@ -17,7 +17,7 @@ const { modals } = useModals(props.scope)
 
     <TransitionGroup name="content-fade">
       <component
-        :is="(modal.component as any)"
+        :is="modal.component"
         v-for="(modal, i) in modals"
         :key="`${modal.component}${i}`"
         v-bind="modal.bindings"

composables/modals.ts

@@ -1,23 +1,28 @@
 import { nanoid } from 'nanoid'
-import type { Ref } from 'vue'
+import type { ComponentPublicInstance, Ref } from 'vue'
 
-type Component = abstract new (...args: any) => any
+type ComponentConstructor<
+  T extends ComponentPublicInstance<Props> = ComponentPublicInstance<any>,
+  Props = any
+> = new (...args: any[]) => T
 
 interface Modal {
   id: string
-  component: Component
+  component: ComponentConstructor
   bindings: Record<string, any>
 }
 
-type Bindings<T extends Component> = InstanceType<T>['$props']
-type ReturnValue<T extends Component> = Parameters<Bindings<T>['onClose']>[0]
+type Bindings<T extends ComponentConstructor> = InstanceType<T>['$props']
+type ReturnValue<T extends ComponentConstructor> = Parameters<
+  Bindings<T>['onClose']
+>[0]
 
 const scopes: Record<string, Ref<Modal[]>> = {}
 
 export function useModals(scope = '') {
   const modals = (scopes[scope] = scopes[scope] ?? ref<Modal[]>([]))
 
-  async function open<T extends Component>(
+  async function open<T extends ComponentConstructor>(
     component: T,
     bindings: Bindings<T>
   ) {