feat: improve useModal type (#311)

* chore: bump vfm

* wip

* wip

* fix: IOverloadedPatchOptionsFunction

* test type

* fix: IOverloadedPatchOptionsFunction

* chore: improve type

* chore: improve type

* chore: bump packages

* feat: improve useModal type

* chore: update docs

* chore: delete test file

* test: add basic cypress test for useModal

Author: hunterliu1003

docs/components/content/LoginFormModalPreview.vue

@@ -2,7 +2,7 @@
 import { ModalsContainer, useModal } from 'vue-final-modal'
 import LoginFormModal from './LoginFormModal.vue'
 
-const { open, close } = useModal<InstanceType<typeof LoginFormModal>['$props']>({
+const { open, close } = useModal({
   component: LoginFormModal,
   attrs: {
     onSubmit(formData) {

docs/components/content/UseModalPreview.vue

@@ -2,9 +2,7 @@
 import { ModalsContainer, useModal } from 'vue-final-modal'
 import ConfirmModal from './ConfirmModal.vue'
 
-const { open, close } = useModal<
-  InstanceType<typeof ConfirmModal>['$props']
->({
+const { open, close } = useModal({
   component: ConfirmModal,
   attrs: {
     title: 'Hello World!',

docs/content/2.get-started/1.guide/3.migration-guide.md

@@ -102,7 +102,7 @@ this.$vfm.show({
 Will be re-written as this:
 
 ```ts
-const { open, close } = useModal<InstanceType<typeof ConfirmModal>['$props']>({
+const { open, close } = useModal({
   component: ConfirmModal,
   attrs: {
     title: 'Hello World!',

docs/content/2.get-started/1.guide/4.types.md

@@ -23,59 +23,51 @@ export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
 ## ModalSlot
 
 ```ts
-export type ModalSlot<T extends Record<string, any> = {}> = string | Component | {
-  component: Component
-  attrs?: T
-}
+interface UseModalOptionsBase { component: Raw<Component>; attrs?: Record<string, any> }
+type ModalSlot = string | Component | UseModalOptionsBase
 ```
 
-## UseModalOptionsPrivate
+## UseModalOptionsSlots
 
 ```ts
-export type UseModalOptionsPrivate<
-  ModalProps extends ComponentProps = {},
-  DefaultSlotProps extends ComponentProps = {},
-> = {
-  defaultModelValue?: boolean
-  context?: Vfm
-  component: Component
-  attrs?: ModalProps
-  slots?: {
-    default: ModalSlot<DefaultSlotProps>
+export type UseModalOptionsSlots = {
+  slots?: string | Component | {
+    default: ModalSlot
     [key: string]: ModalSlot
   }
-
-  id?: symbol
-  modelValue?: boolean
-  resolveOpened?: () => void
-  resolveClosed?: () => void
 }
 ```
 
 ## UseModalOptions
 
 ```ts
-export type UseModalOptions<
-  ModalProps extends ComponentProps,
-  DefaultSlotProps extends ComponentProps = {},
-> = Pick<
-  UseModalOptionsPrivate<ModalProps, DefaultSlotProps>,
-  | 'defaultModelValue'
-  | 'context'
-  | 'component'
-  | 'attrs'
-  | 'slots'
->
+export type UseModalOptions = {
+  defaultModelValue?: boolean
+  context?: Vfm
+  component: Raw<Component>
+  attrs?: Record<string, any>
+} & UseModalOptionsSlots
+```
+
+## UseModalOptionsPrivate
+
+```ts
+export type UseModalOptionsPrivate = {
+  id: symbol
+  modelValue: boolean
+  resolveOpened: () => void
+  resolveClosed: () => void
+}
 ```
 
 ## UseModalReturnType
 
 ```ts
-export type UseModalReturnType<ModalProps extends ComponentProps, DefaultSlotProps extends ComponentProps> = {
-  options: UseModalOptions<ModalProps, DefaultSlotProps>
-  open: () => Promise<unknown>
-  close: () => Promise<unknown>
-  patchOptions: (options: UseModalOptions<ModalProps, DefaultSlotProps>) => void
+export interface UseModalReturnType {
+  options: UseModalOptions & UseModalOptionsPrivate
+  open: () => Promise<string>
+  close: () => Promise<string>
+  patchOptions: IOverloadedPatchOptionsFn
   destroy: () => void
 }
 ```
@@ -87,7 +79,7 @@ export type Vfm = {
   install(app: App): void
   modals: ComputedRef<Modal>[]
   openedModals: ComputedRef<Modal>[]
-  dynamicModals: UseModalOptionsPrivate<{}, {}>[]
+  dynamicModals: (UseModalOptions & UseModalOptionsPrivate)[]
   modalsContainers: Ref<symbol[]>
   get: (modalId: ModalId) => undefined | ComputedRef<Modal>
   toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>

docs/content/3.api/2.composables/1.use-modal.md

@@ -26,9 +26,7 @@ import { ModalsContainer } from 'vue-final-modal'
 ```ts
 import { VueFinalModal, useModal } from 'vue-final-modal'
 
-const modalInstance = useModal<
-  InstanceType<typeof VueFinalModal>['$props']
->({
+const modalInstance = useModal({
   component: VueFinalModal,
   attrs: {
     // Props

docs/package.json

@@ -9,13 +9,13 @@
     "preview": "nuxi preview"
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.4.5",
+    "@nuxt-themes/docus": "^1.4.7",
     "@nuxtjs/tailwindcss": "^6.2.0",
     "nuxt": "^3.0.0"
   },
   "dependencies": {
     "@vorms/core": "^1.0.0",
-    "vue-final-modal": "workspace:4.0.0-rc.10",
+    "vue-final-modal": "workspace:4.0.0-rc.11",
     "vue3-drag-resize": "^2.0.5"
   }
 }

examples/nuxt3/components/MyModalPreview.vue

@@ -2,7 +2,7 @@
 import { useModal } from 'vue-final-modal'
 import MyModal from './MyModal.vue'
 
-const { open } = useModal<InstanceType<typeof MyModal>['$props']>({
+const { open } = useModal({
   component: MyModal,
   attrs: {
     title: 'Hello World!',

examples/nuxt3/package.json

@@ -8,12 +8,12 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.4.5",
+    "@nuxt-themes/docus": "^1.4.7",
     "@nuxtjs/tailwindcss": "^6.2.0",
     "nuxt": "3.0.0"
   },
   "dependencies": {
     "@vue-final-modal/nuxt": "1.0.0-rc.0",
-    "vue-final-modal": "4.0.0-rc.10"
+    "vue-final-modal": "4.0.0-rc.11"
   }
 }

examples/vue3/package.json

@@ -10,16 +10,16 @@
   },
   "dependencies": {
     "vue": "^3.2.45",
-    "vue-final-modal": "4.0.0-rc.10"
+    "vue-final-modal": "4.0.0-rc.11"
   },
   "devDependencies": {
     "@iconify/vue": "^4.0.0",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.0.2",
     "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.18",
-    "tailwindcss": "^3.2.2",
-    "typescript": "^4.6.4",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.4",
     "vite": "^4.0.4",
-    "vue-tsc": "^1.0.18"
+    "vue-tsc": "^1.0.24"
   }
 }

examples/vue3/src/components/MyModalPreview.vue

@@ -3,7 +3,7 @@ import { useModal } from 'vue-final-modal'
 import MyModal from './MyModal.vue'
 import VButton from './VButton.vue'
 
-const { open } = useModal<InstanceType<typeof MyModal>['$props']>({
+const { open } = useModal({
   component: MyModal,
   attrs: {
     title: 'Hello World!',