feat: improve useModal type

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!',

package.json

@@ -23,16 +23,14 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.34.1",
-    "@types/node": "^18.0.0",
+    "@types/node": "^18.11.18",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@vue/test-utils": "^2.2.6",
-    "concurrently": "^7.4.0",
-    "eslint": "^8.31.0",
-    "pnpm": "^7.23.0",
-    "sass": "^1.55.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
+    "@vue/test-utils": "^2.2.7",
+    "concurrently": "^7.6.0",
+    "eslint": "^8.32.0",
+    "pnpm": "^7.25.1",
+    "sass": "^1.57.1",
+    "typescript": "^4.9.4",
     "vite": "^4.0.4",
     "vue-tsc": "^1.0.24"
   }

packages/nuxt/package.json

@@ -24,13 +24,13 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.0.0",
-    "vue-final-modal": "^4.0.0-rc.10"
+    "vue-final-modal": "^4.0.0-rc.11"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/schema": "^3.0.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "nuxt": "^3.0.0",
-    "release-it": "^15.5.0"
+    "release-it": "^15.6.0"
   }
 }

packages/vue-final-modal/cypress/components/TestUseModal.spec.ts

@@ -0,0 +1,11 @@
+import TestUseModal from './TestUseModal.vue'
+import { createVfm } from '~/index'
+
+it('renders the VueFinalModal', () => {
+  cy.mount(TestUseModal, {
+    global: {
+      plugins: [createVfm()],
+    },
+  })
+  cy.contains('Hello World!')
+})

packages/vue-final-modal/cypress/components/TestUseModal.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { ModalsContainer, VueFinalModal, useModal } from '~/index'
+
+useModal({
+  defaultModelValue: true,
+  component: VueFinalModal,
+  slots: {
+    default: 'Hello World!',
+  },
+})
+</script>
+
+<template>
+  <ModalsContainer />
+</template>

packages/vue-final-modal/package.json

@@ -31,27 +31,26 @@
     "release": "pnpm build && pnpm test && release-it"
   },
   "dependencies": {
-    "@vueuse/core": "^9.9.0",
-    "@vueuse/integrations": "^9.9.0",
+    "@vueuse/core": "^9.11.1",
+    "@vueuse/integrations": "^9.11.1",
     "focus-trap": "^7.2.0",
     "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@cypress/vue": "^5.0.1",
+    "@cypress/vue": "^5.0.3",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@vitest/coverage-istanbul": "^0.26.2",
-    "@vue-macros/short-vmodel": "^1.0.3",
-    "@vue-macros/volar": "^0.5.10",
-    "cypress": "^11.1.0",
-    "jsdom": "^20.0.2",
-    "release-it": "^15.5.0",
-    "unplugin-vue-macros": "^1.3.2",
-    "unplugin-vue-define-options": "^1.1.3",
-    "vitest": "^0.25.7"
+    "@vitest/coverage-istanbul": "^0.28.1",
+    "@vue-macros/volar": "^0.5.15",
+    "cypress": "^12.3.0",
+    "jsdom": "^21.1.0",
+    "release-it": "^15.6.0",
+    "unplugin-vue-define-options": "^1.1.4",
+    "unplugin-vue-macros": "^1.4.2",
+    "vitest": "^0.28.1"
   },
   "peerDependencies": {
-    "@vueuse/core": "^9.9.0",
-    "@vueuse/integrations": "^9.9.0",
-    "focus-trap": "^7.2.0"
+    "@vueuse/core": ">=9.11.1",
+    "@vueuse/integrations": ">=9.11.1",
+    "focus-trap": ">=7.2.0"
   }
 }