Skip to content

Commit 668a77b

Browse files
hunterliu1003hunterliu1003
authored
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
1 parent 1d64029 commit 668a77b

File tree

29 files changed

+646
-720
lines changed

29 files changed

+646
-720
lines changed

‎docs/components/content/LoginFormModalPreview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { ModalsContainer, useModal } from 'vue-final-modal'
33
import LoginFormModal from './LoginFormModal.vue'
44
5-
const { open, close } = useModal<InstanceType<typeof LoginFormModal>['$props']>({
5+
const { open, close } = useModal({
66
component: LoginFormModal,
77
attrs: {
88
onSubmit(formData) {

‎docs/components/content/UseModalPreview.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
import { ModalsContainer, useModal } from 'vue-final-modal'
33
import ConfirmModal from './ConfirmModal.vue'
44
5-
const { open, close } = useModal<
6-
InstanceType<typeof ConfirmModal>['$props']
7-
>({
5+
const { open, close } = useModal({
86
component: ConfirmModal,
97
attrs: {
108
title: 'Hello World!',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ this.$vfm.show({
102102
Will be re-written as this:
103103

104104
```ts
105-
const { open, close } = useModal<InstanceType<typeof ConfirmModal>['$props']>({
105+
const { open, close } = useModal({
106106
component: ConfirmModal,
107107
attrs: {
108108
title: 'Hello World!',

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

Lines changed: 29 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -23,59 +23,51 @@ export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
2323
## ModalSlot
2424
2525
```ts
26-
export type ModalSlot<T extends Record<string, any> = {}> = string | Component | {
27-
component: Component
28-
attrs?: T
29-
}
26+
interface UseModalOptionsBase { component: Raw<Component>; attrs?: Record<string, any> }
27+
type ModalSlot = string | Component | UseModalOptionsBase
3028
```
3129
32-
## UseModalOptionsPrivate
30+
## UseModalOptionsSlots
3331
3432
```ts
35-
export type UseModalOptionsPrivate<
36-
ModalProps extends ComponentProps = {},
37-
DefaultSlotProps extends ComponentProps = {},
38-
> = {
39-
defaultModelValue?: boolean
40-
context?: Vfm
41-
component: Component
42-
attrs?: ModalProps
43-
slots?: {
44-
default: ModalSlot<DefaultSlotProps>
33+
export type UseModalOptionsSlots = {
34+
slots?: string | Component | {
35+
default: ModalSlot
4536
[key: string]: ModalSlot
4637
}
47-
48-
id?: symbol
49-
modelValue?: boolean
50-
resolveOpened?: () => void
51-
resolveClosed?: () => void
5238
}
5339
```
5440
5541
## UseModalOptions
5642
5743
```ts
58-
export type UseModalOptions<
59-
ModalProps extends ComponentProps,
60-
DefaultSlotProps extends ComponentProps = {},
61-
> = Pick<
62-
UseModalOptionsPrivate<ModalProps, DefaultSlotProps>,
63-
| 'defaultModelValue'
64-
| 'context'
65-
| 'component'
66-
| 'attrs'
67-
| 'slots'
68-
>
44+
export type UseModalOptions = {
45+
defaultModelValue?: boolean
46+
context?: Vfm
47+
component: Raw<Component>
48+
attrs?: Record<string, any>
49+
} & UseModalOptionsSlots
50+
```
51+
52+
## UseModalOptionsPrivate
53+
54+
```ts
55+
export type UseModalOptionsPrivate = {
56+
id: symbol
57+
modelValue: boolean
58+
resolveOpened: () => void
59+
resolveClosed: () => void
60+
}
6961
```
7062
7163
## UseModalReturnType
7264
7365
```ts
74-
export type UseModalReturnType<ModalProps extends ComponentProps, DefaultSlotProps extends ComponentProps> = {
75-
options: UseModalOptions<ModalProps, DefaultSlotProps>
76-
open: () => Promise<unknown>
77-
close: () => Promise<unknown>
78-
patchOptions: (options: UseModalOptions<ModalProps, DefaultSlotProps>) => void
66+
export interface UseModalReturnType {
67+
options: UseModalOptions & UseModalOptionsPrivate
68+
open: () => Promise<string>
69+
close: () => Promise<string>
70+
patchOptions: IOverloadedPatchOptionsFn
7971
destroy: () => void
8072
}
8173
```
@@ -87,7 +79,7 @@ export type Vfm = {
8779
install(app: App): void
8880
modals: ComputedRef<Modal>[]
8981
openedModals: ComputedRef<Modal>[]
90-
dynamicModals: UseModalOptionsPrivate<{}, {}>[]
82+
dynamicModals: (UseModalOptions & UseModalOptionsPrivate)[]
9183
modalsContainers: Ref<symbol[]>
9284
get: (modalId: ModalId) => undefined | ComputedRef<Modal>
9385
toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,7 @@ import { ModalsContainer } from 'vue-final-modal'
2626
```ts
2727
import { VueFinalModal, useModal } from 'vue-final-modal'
2828

29-
const modalInstance = useModal<
30-
InstanceType<typeof VueFinalModal>['$props']
31-
>({
29+
const modalInstance = useModal({
3230
component: VueFinalModal,
3331
attrs: {
3432
// Props

‎docs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
"preview": "nuxi preview"
1010
},
1111
"devDependencies": {
12-
"@nuxt-themes/docus": "^1.4.5",
12+
"@nuxt-themes/docus": "^1.4.7",
1313
"@nuxtjs/tailwindcss": "^6.2.0",
1414
"nuxt": "^3.0.0"
1515
},
1616
"dependencies": {
1717
"@vorms/core": "^1.0.0",
18-
"vue-final-modal": "workspace:4.0.0-rc.10",
18+
"vue-final-modal": "workspace:4.0.0-rc.11",
1919
"vue3-drag-resize": "^2.0.5"
2020
}
2121
}

‎examples/nuxt3/components/MyModalPreview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { useModal } from 'vue-final-modal'
33
import MyModal from './MyModal.vue'
44
5-
const { open } = useModal<InstanceType<typeof MyModal>['$props']>({
5+
const { open } = useModal({
66
component: MyModal,
77
attrs: {
88
title: 'Hello World!',

‎examples/nuxt3/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
"postinstall": "nuxt prepare"
99
},
1010
"devDependencies": {
11-
"@nuxt-themes/docus": "^1.4.5",
11+
"@nuxt-themes/docus": "^1.4.7",
1212
"@nuxtjs/tailwindcss": "^6.2.0",
1313
"nuxt": "3.0.0"
1414
},
1515
"dependencies": {
1616
"@vue-final-modal/nuxt": "1.0.0-rc.0",
17-
"vue-final-modal": "4.0.0-rc.10"
17+
"vue-final-modal": "4.0.0-rc.11"
1818
}
1919
}

‎examples/vue3/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@
1010
},
1111
"dependencies": {
1212
"vue": "^3.2.45",
13-
"vue-final-modal": "4.0.0-rc.10"
13+
"vue-final-modal": "4.0.0-rc.11"
1414
},
1515
"devDependencies": {
1616
"@iconify/vue": "^4.0.0",
17-
"@vitejs/plugin-vue": "^4.0.0",
17+
"@vitejs/plugin-vue": "^4.0.2",
1818
"autoprefixer": "^10.4.13",
19-
"postcss": "^8.4.18",
20-
"tailwindcss": "^3.2.2",
21-
"typescript": "^4.6.4",
19+
"postcss": "^8.4.21",
20+
"tailwindcss": "^3.2.4",
21+
"typescript": "^4.9.4",
2222
"vite": "^4.0.4",
23-
"vue-tsc": "^1.0.18"
23+
"vue-tsc": "^1.0.24"
2424
}
2525
}

‎examples/vue3/src/components/MyModalPreview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useModal } from 'vue-final-modal'
33
import MyModal from './MyModal.vue'
44
import VButton from './VButton.vue'
55
6-
const { open } = useModal<InstanceType<typeof MyModal>['$props']>({
6+
const { open } = useModal({
77
component: MyModal,
88
attrs: {
99
title: 'Hello World!',

0 commit comments

Comments
 (0)