Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 05fa0db

Browse files
refactor: refine code
1 parent fe99ca2 commit 05fa0db

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+495
-426
lines changed

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

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,36 @@ The exported types in VueFinalModal.
88
export type ModalId = number | string | symbol
99
```
1010
11-
## CreateVNodeOptions
11+
## Template
1212
1313
```ts
14-
export type CreateVNodeOptions<T extends Component> = {
14+
export type Template<T extends Component> = {
1515
component: T
1616
attrs?: ComponentProps<T>
1717
slots?: {
18-
[K in keyof ComponentSlots<T>]?: string | Component | CreateVNodeOptions<Component>
18+
[K in keyof ComponentSlots<T>]?: string | Component | Template<Component>
1919
}
2020
}
2121
```
2222
23-
## UseModalOptions
23+
## UseModalTemplate
2424
2525
```ts
26-
export type UseModalOptions<T extends Component> = {
26+
export type UseModalTemplate<T extends Component> = {
2727
defaultModelValue?: boolean
2828
keepAlive?: boolean
2929
component?: T
3030
attrs?: ComponentProps<T>
3131
slots?: {
32-
[K in keyof ComponentSlots<T>]?: string | Component | CreateVNodeOptions<Component>
32+
[K in keyof ComponentSlots<T>]?: string | Component | Template<Component>
3333
}
3434
}
3535
```
3636
37-
## UseModalOptionsPrivate
37+
## UseModalTemplatePrivate
3838
3939
```ts
40-
export type UseModalOptionsPrivate = {
40+
export type UseModalTemplatePrivate = {
4141
id: symbol
4242
modelValue: boolean
4343
resolveOpened: () => void
@@ -49,10 +49,10 @@ export type UseModalOptionsPrivate = {
4949
5050
```ts
5151
export interface UseModalReturnType<T extends Component> {
52-
options:UseModalOptions<T> & UseModalOptionsPrivate
52+
template:UseModalTemplate<T> & UseModalTemplatePrivate
5353
open: () => Promise<string>
5454
close: () => Promise<string>
55-
patchOptions: (options: Partial<UseModalOptions<T>>) => void
55+
patchTemplate: (template: Partial<UseModalTemplate<T>>) => void
5656
destroy: () => void
5757
}
5858
```
@@ -65,13 +65,12 @@ export type Vfm = {
6565
modals: ComputedRef<ModalExposed>[]
6666
openedModals: ComputedRef<ModalExposed>[]
6767
openedModalOverlays: ComputedRef<ModalExposed>[]
68-
vNodesContainer: VNodesContainer
6968
get: (modalId: ModalId) => undefined | ComputedRef<ModalExposed>
7069
toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
7170
open: (modalId: ModalId) => undefined | Promise<string>
7271
close: (modalId: ModalId) => undefined | Promise<string>
7372
closeAll: () => Promise<PromiseSettledResult<string>[]>
74-
}
73+
}&Partial<CreateContainer>
7574
```
7675
7776
## ModalExposed
@@ -84,5 +83,25 @@ export type ModalExposed = {
8483
overlayVisible: Ref<boolean>
8584
toggle: (show?: boolean) => Promise<string>
8685
}
86+
```
87+
88+
## CreateContainer
8789
88-
```
90+
```ts
91+
export type CreateContainer = {
92+
Container: Component
93+
useTemplate: UseTemplate
94+
}
95+
```
96+
97+
## UseTemplate
98+
99+
```ts
100+
export type UseTemplate = <T extends Component>(
101+
template: Template<T>,
102+
options?: { onUnmounted?: (() => void) }
103+
) => {
104+
show: () => Promise<void>
105+
hide: () => Promise<void>
106+
}
107+
```

‎packages/vue-final-modal/cypress/components/useZIndex.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ describe('Test useZIndex()', () => {
4242
})
4343

4444
cy.get('@app').then(() => {
45-
thirdModal.patchOptions({
45+
thirdModal.patchTemplate({
4646
attrs: {
4747
zIndexFn: ({ index }) => 1234 + 2 * index,
4848
},
Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,10 @@
1-
import { computed,defineComponent, onBeforeUnmount } from 'vue'
2-
import { useVfm } from '~/useVfm'
1+
import { defineComponent, h } from 'vue'
2+
import { useVfm } from '~/composables/useVfm'
33

44
export const ModalsContainer = defineComponent({
55
name: 'ModalsContainer',
66
setup() {
7-
const { vNodesContainer } = useVfm()
8-
9-
const uid = Symbol(__DEV__ ? 'VNodesContainer' : '')
10-
const shouldMount = computed(() => uid === vNodesContainer.containers.value?.[0])
11-
12-
vNodesContainer.containers.value.push(uid)
13-
onBeforeUnmount(() => {
14-
vNodesContainer.containers.value = vNodesContainer.containers.value.filter(i => i !== uid)
15-
})
16-
17-
return () => {
18-
if (!shouldMount.value)
19-
return null
20-
return vNodesContainer.vNodes
21-
}
7+
const { Container } = useVfm()
8+
return () => Container ? h(Container) : null
229
},
2310
})
Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
import type { Component, PropType } from 'vue'
22
import { defineComponent } from 'vue'
3-
import type { UseModalOptions,UseModalOptionsPrivate } from '..'
4-
import { createVNode } from '~/useVNode'
3+
import type { UseModalTemplate,UseModalTemplatePrivate } from '~/types'
4+
import { templateToVNode } from '~/composables/useTemplate'
55

66
export const UseModal = defineComponent({
77
name: 'UseModal',
88
props: {
9-
modal: {
10-
type: Object as PropType<UseModalOptions<Component> & UseModalOptionsPrivate>,
9+
template: {
10+
type: Object as PropType<UseModalTemplate<Component> & UseModalTemplatePrivate>,
1111
required: true,
1212
},
1313
},
1414
setup(props) {
15-
function renderDynamicModal(modal: (UseModalOptions<Component> & UseModalOptionsPrivate)) {
16-
if (!modal.component)
15+
function renderModalTemplate(template: (UseModalTemplate<Component> & UseModalTemplatePrivate)) {
16+
if (!template.component)
1717
return null
18-
return createVNode({
19-
component: modal.component,
18+
return templateToVNode({
19+
component: template.component,
2020
attrs: {
21-
'modelValue': modal.modelValue,
22-
'displayDirective': modal?.keepAlive ? 'show' : undefined,
23-
...(typeof modal.attrs === 'object' ? modal.attrs : {}),
21+
'modelValue': template.modelValue,
22+
'displayDirective': template?.keepAlive ? 'show' : undefined,
23+
...(typeof template.attrs === 'object' ? template.attrs : {}),
2424
'onUpdate:modelValue': (value: boolean) => {
25-
modal.modelValue = value
26-
const onUpdateModelValue = modal.attrs?.['onUpdate:modelValue']
25+
template.modelValue = value
26+
const onUpdateModelValue = template.attrs?.['onUpdate:modelValue']
2727
if (onUpdateModelValue)
2828
onUpdateModelValue(value)
2929
},
30-
'on_closed': () => modal?.resolveClosed?.(),
31-
'on_opened': () => modal?.resolveOpened?.(),
30+
'on_closed': () => template?.resolveClosed?.(),
31+
'on_opened': () => template?.resolveOpened?.(),
3232
},
33-
slots: modal.slots,
33+
slots: template.slots,
3434
})
3535
}
3636

37-
return () => renderDynamicModal(props.modal)
37+
return () => renderModalTemplate(props.template)
3838
},
3939
})

‎packages/vue-final-modal/src/components/VueFinalModal/VueFinalModal.vue renamed to ‎packages/vue-final-modal/src/components/VueFinalModal.vue

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<script setup lang="ts">
22
import { nextTick, onBeforeUnmount, onMounted, ref, useAttrs } from 'vue'
3-
import { vueFinalModalProps } from './VueFinalModalProps'
4-
import { useTransition } from './useTransition'
5-
import { useToClose } from './useToClose'
6-
import { useModelValue } from './useModelValue'
7-
import { useFocusTrap } from './useFocusTrap'
8-
import { useLockScroll } from './useBodyScrollLock'
9-
import { useZIndex } from './useZIndex'
10-
import { vVisible } from './vVisible'
11-
import { useInternalExposed } from './useInternalExposed'
3+
import { vueFinalModalProps } from '~/types'
4+
import { useTransition } from '~/composables/useTransition'
5+
import { useToClose } from '~/composables/useToClose'
6+
import { useModelValue } from '~/composables/useModelValue'
7+
import { useFocusTrap } from '~/composables/useFocusTrap'
8+
import { useLockScroll } from '~/composables/useBodyScrollLock'
9+
import { useZIndex } from '~/composables/useZIndex'
10+
import { vVisible } from '~/composables/vVisible'
11+
import { useInternalExposed } from '~/composables/useInternalExposed'
1212
import { arrayMoveItemToLast, arrayRemoveItem } from '~/utils'
13-
import { useSwipeToClose } from '~/useSwipeToClose'
14-
import { useVfm } from '~/useVfm'
13+
import { useSwipeToClose } from '~/composables/useSwipeToClose'
14+
import { useVfm } from '~/composables/useVfm'
1515
1616
export interface VueFinalModalEmits {
1717
(e: 'update:modelValue', modelValue: boolean): void

‎packages/vue-final-modal/src/components/VueFinalModal/useBodyScrollLock.ts renamed to ‎packages/vue-final-modal/src/composables/useBodyScrollLock.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Ref } from 'vue'
22
import { onBeforeUnmount, watch } from 'vue'
3-
import type VueFinalModal from './VueFinalModal.vue'
3+
import type VueFinalModal from '~/components/VueFinalModal.vue'
4+
import type { ComponentProps } from '~/types'
45

56
type BodyScrollOptions = {
67
reserveScrollBarGap?: boolean
@@ -233,7 +234,7 @@ export const enableBodyScroll = (targetElement?: HTMLElement) => {
233234
}
234235
}
235236

236-
export function useLockScroll(props: InstanceType<typeof VueFinalModal>['$props'], options: {
237+
export function useLockScroll(props: ComponentProps<typeof VueFinalModal>, options: {
237238
lockScrollEl: Ref<undefined | HTMLElement>
238239
modelValueLocal: Ref<boolean>
239240
}) {

‎packages/vue-final-modal/src/components/VueFinalModal/useFocusTrap.ts renamed to ‎packages/vue-final-modal/src/composables/useFocusTrap.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Ref } from 'vue'
22
import { useFocusTrap as _useFocusTrap } from '@vueuse/integrations/useFocusTrap'
3-
import type VueFinalModal from './VueFinalModal.vue'
4-
import type { ComponentProps } from '~/Component'
3+
import type VueFinalModal from '~/components/VueFinalModal.vue'
4+
import type { ComponentProps } from '~/types'
55

66
export function useFocusTrap(
77
props: ComponentProps<typeof VueFinalModal>,

‎packages/vue-final-modal/src/components/VueFinalModal/useInternalExposed.ts renamed to ‎packages/vue-final-modal/src/composables/useInternalExposed.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Ref } from 'vue'
22
import { computed, toRef } from 'vue'
3-
import type { ComponentProps, ModalExposed, VueFinalModal } from '~/index'
3+
import type VueFinalModal from '~/components/VueFinalModal.vue'
4+
import type { ComponentProps, ModalExposed } from '~/types'
45
import { noop, once } from '~/utils'
56

67
export const useInternalExposed = function (

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /