props typing

lib/actions.ts

@@ -1,11 +1,17 @@
+import type { AllowedComponentProps, Component, VNodeProps } from 'vue'
+
 import { addModal, state as stateData } from './data'
 import { $emit, $off, $on } from './event'
-import type { CloseEventData, ClosedEventData, ModalItem, OpenModalOptions } from './types'
+import type { CloseEventData, ClosedEventData, OpenModalOptions } from './types'
 import { Events } from './types'
 
-export async function openModal<T = unknown>(
-  component: ModalItem['component'],
-  props?: ModalItem['props'],
+export type ExtractComponentProps<TComponent> = TComponent extends new () => { $props: infer P }
+  ? Omit<P, keyof VNodeProps | keyof AllowedComponentProps | keyof Array<any>>
+  : never
+
+export async function openModal<T = unknown, C extends Component = Component>(
+  component: C,
+  props: ExtractComponentProps<C> extends Record<string, never> ? {} : ExtractComponentProps<C>,
   options?: OpenModalOptions
 ) {
   if (options?.force && stateData.modals.length) {
@@ -33,15 +39,15 @@ export async function openModal<T = unknown>(
   })
 }
 
-export function confirmModal(data?: any): Promise<any> {
+export function confirmModal<T>(data?: T): Promise<T> {
   return new Promise((resolve) => {
     function onClosed(data: any) {
       $off(Events.Closed, onClosed)
       resolve(data.data)
     }
 
     $on(Events.Closed, onClosed)
-    $emit(Events.Close, { success: true, data } as CloseEventData)
+    $emit(Events.Close, { success: true, data } as CloseEventData<T>)
   })
 }
 

lib/types.ts

@@ -34,18 +34,30 @@ export type OpenModalOptions = {
 export interface ModalItem {
   id: number
   component: Component
-  props?: {}
+  props?: { [key: string]: any }
   options: OpenModalOptions
 }
 
-export type CloseEventData = {
-  success: boolean
+export type CloseEventData<T = any> = {
   forceCloseAll?: boolean
-  data?: any
-}
+} & (
+  | {
+      success: true
+      data: T
+    }
+  | {
+      success: false
+    }
+)
 
-export type ClosedEventData = {
+export type ClosedEventData<T = any> = {
   id: ModalItem['id']
-  success: false
-  data?: any
-}
+} & (
+  | {
+      success: true
+      data: T
+    }
+  | {
+      success: false
+    }
+)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolirt/vue-modal",
-  "version": "0.0.16",
+  "version": "1.0.0",
   "description": "Simple Vue3 modal package",
   "author": "kolirt",
   "license": "MIT",

src/components/Test1Modal.vue

@@ -4,9 +4,9 @@ import { notify } from '@kyvg/vue3-notification'
 import { closeModal, confirmModal, openModal } from '../../lib'
 import Test2Modal from './Test2Modal.vue'
 
-const props = defineProps({
-  test: {}
-})
+const props = defineProps<{
+  test: string
+}>()
 
 function runModal2(force = false) {
   openModal(

src/components/Test3Modal.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { closeAllModals, closeModal, confirmModal } from '../../lib'
+import SimpleModal from '../../lib/components/layouts/SimpleModal.vue'
 
 const props = defineProps({
-  test: {}
+  test: {
+    type: String,
+    required: true
+  }
 })
 </script>
 

tsconfig.json

@@ -8,9 +8,13 @@
     "strict": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
+    "verbatimModuleSyntax": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "exclude": ["test", "demo", "node_modules", "examples"]
 }

tsconfig.lib.json

@@ -8,6 +8,7 @@
     "strict": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
+    "verbatimModuleSyntax": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true

vite.demo.config.ts

@@ -11,7 +11,6 @@ export default defineConfig({
     ],
     resolve: {
         alias: {
-            // @ts-ignore
             '@': fileURLToPath(new URL('./src', import.meta.url)),
             'lib': fileURLToPath(new URL('./lib', import.meta.url)),
         }