From 361008ce84d5c51027d0e2d844094014be605a92 Mon Sep 17 00:00:00 2001
From: Johann Schopplich <mail@johannschopplich.com>
Date: Tue, 27 Jun 2023 10:13:05 +0200
Subject: [PATCH] refactor: modal component binding types

---
 components/App/ModalWrapper.vue |  1 +
 components/App/Modals.vue       |  2 +-
 composables/modals.ts           | 17 +++++++++++------
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/components/App/ModalWrapper.vue b/components/App/ModalWrapper.vue
index 1c2fd39..10210b0 100644
--- a/components/App/ModalWrapper.vue
+++ b/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>
diff --git a/components/App/Modals.vue b/components/App/Modals.vue
index 75fa79c..1bb31ea 100644
--- a/components/App/Modals.vue
+++ b/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"
diff --git a/composables/modals.ts b/composables/modals.ts
index b7ace74..46e8951 100644
--- a/composables/modals.ts
+++ b/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>
   ) {