refactor: refine code

Author: hunterliu1003

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

@@ -8,36 +8,36 @@ The exported types in VueFinalModal.
 export type ModalId = number | string | symbol
 ```
 
-## CreateVNodeOptions
+## Template
 
 ```ts
-export type CreateVNodeOptions<T extends Component> = {
+export type Template<T extends Component> = {
   component: T
   attrs?: ComponentProps<T>
   slots?: {
-    [K in keyof ComponentSlots<T>]?: string | Component | CreateVNodeOptions<Component>
+    [K in keyof ComponentSlots<T>]?: string | Component | Template<Component>
   }
 }
 ```
 
-## UseModalOptions
+## UseModalTemplate
 
 ```ts
-export type UseModalOptions<T extends Component> = {
+export type UseModalTemplate<T extends Component> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
   component?: T
   attrs?: ComponentProps<T>
   slots?: {
-    [K in keyof ComponentSlots<T>]?: string | Component | CreateVNodeOptions<Component>
+    [K in keyof ComponentSlots<T>]?: string | Component | Template<Component>
   }
 }
 ```
 
-## UseModalOptionsPrivate
+## UseModalTemplatePrivate
 
 ```ts
-export type UseModalOptionsPrivate = {
+export type UseModalTemplatePrivate = {
   id: symbol
   modelValue: boolean
   resolveOpened: () => void
@@ -49,10 +49,10 @@ export type UseModalOptionsPrivate = {
 
 ```ts
 export interface UseModalReturnType<T extends Component> {
-  options: UseModalOptions<T> & UseModalOptionsPrivate
+  template: UseModalTemplate<T> & UseModalTemplatePrivate
   open: () => Promise<string>
   close: () => Promise<string>
-  patchOptions: (options: Partial<UseModalOptions<T>>) => void
+  patchTemplate: (template: Partial<UseModalTemplate<T>>) => void
   destroy: () => void
 }
 ```
@@ -65,13 +65,12 @@ export type Vfm = {
   modals: ComputedRef<ModalExposed>[]
   openedModals: ComputedRef<ModalExposed>[]
   openedModalOverlays: ComputedRef<ModalExposed>[]
-  vNodesContainer: VNodesContainer
   get: (modalId: ModalId) => undefined | ComputedRef<ModalExposed>
   toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
   open: (modalId: ModalId) => undefined | Promise<string>
   close: (modalId: ModalId) => undefined | Promise<string>
   closeAll: () => Promise<PromiseSettledResult<string>[]>
-}
+} & Partial<CreateContainer>
 ```
 
 ## ModalExposed
@@ -84,5 +83,25 @@ export type ModalExposed = {
   overlayVisible: Ref<boolean>
   toggle: (show?: boolean) => Promise<string>
 }
+```
+
+## CreateContainer
 
-```
+```ts
+export type CreateContainer = {
+  Container: Component
+  useTemplate: UseTemplate
+}
+```
+
+## UseTemplate
+
+```ts
+export type UseTemplate = <T extends Component>(
+  template: Template<T>,
+  options?: { onUnmounted?: (() => void) }
+) => {
+  show: () => Promise<void>
+  hide: () => Promise<void>
+}
+```

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

@@ -42,7 +42,7 @@ describe('Test useZIndex()', () => {
     })
 
     cy.get('@app').then(() => {
-      thirdModal.patchOptions({
+      thirdModal.patchTemplate({
         attrs: {
           zIndexFn: ({ index }) => 1234 + 2 * index,
         },

packages/vue-final-modal/src/components/ModalsContainer.ts

@@ -1,23 +1,10 @@
-import { computed, defineComponent, onBeforeUnmount } from 'vue'
-import { useVfm } from '~/useVfm'
+import { defineComponent, h } from 'vue'
+import { useVfm } from '~/composables/useVfm'
 
 export const ModalsContainer = defineComponent({
   name: 'ModalsContainer',
   setup() {
-    const { vNodesContainer } = useVfm()
-
-    const uid = Symbol(__DEV__ ? 'VNodesContainer' : '')
-    const shouldMount = computed(() => uid === vNodesContainer.containers.value?.[0])
-
-    vNodesContainer.containers.value.push(uid)
-    onBeforeUnmount(() => {
-      vNodesContainer.containers.value = vNodesContainer.containers.value.filter(i => i !== uid)
-    })
-
-    return () => {
-      if (!shouldMount.value)
-        return null
-      return vNodesContainer.vNodes
-    }
+    const { Container } = useVfm()
+    return () => Container ? h(Container) : null
   },
 })

packages/vue-final-modal/src/components/UseModal.ts

@@ -1,39 +1,39 @@
 import type { Component, PropType } from 'vue'
 import { defineComponent } from 'vue'
-import type { UseModalOptions, UseModalOptionsPrivate } from '..'
-import { createVNode } from '~/useVNode'
+import type { UseModalTemplate, UseModalTemplatePrivate } from '~/types'
+import { templateToVNode } from '~/composables/useTemplate'
 
 export const UseModal = defineComponent({
   name: 'UseModal',
   props: {
-    modal: {
-      type: Object as PropType<UseModalOptions<Component> & UseModalOptionsPrivate>,
+    template: {
+      type: Object as PropType<UseModalTemplate<Component> & UseModalTemplatePrivate>,
       required: true,
     },
   },
   setup(props) {
-    function renderDynamicModal(modal: (UseModalOptions<Component> & UseModalOptionsPrivate)) {
-      if (!modal.component)
+    function renderModalTemplate(template: (UseModalTemplate<Component> & UseModalTemplatePrivate)) {
+      if (!template.component)
         return null
-      return createVNode({
-        component: modal.component,
+      return templateToVNode({
+        component: template.component,
         attrs: {
-          'modelValue': modal.modelValue,
-          'displayDirective': modal?.keepAlive ? 'show' : undefined,
-          ...(typeof modal.attrs === 'object' ? modal.attrs : {}),
+          'modelValue': template.modelValue,
+          'displayDirective': template?.keepAlive ? 'show' : undefined,
+          ...(typeof template.attrs === 'object' ? template.attrs : {}),
           'onUpdate:modelValue': (value: boolean) => {
-            modal.modelValue = value
-            const onUpdateModelValue = modal.attrs?.['onUpdate:modelValue']
+            template.modelValue = value
+            const onUpdateModelValue = template.attrs?.['onUpdate:modelValue']
             if (onUpdateModelValue)
               onUpdateModelValue(value)
           },
-          'on_closed': () => modal?.resolveClosed?.(),
-          'on_opened': () => modal?.resolveOpened?.(),
+          'on_closed': () => template?.resolveClosed?.(),
+          'on_opened': () => template?.resolveOpened?.(),
         },
-        slots: modal.slots,
+        slots: template.slots,
       })
     }
 
-    return () => renderDynamicModal(props.modal)
+    return () => renderModalTemplate(props.template)
   },
 })

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

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref, useAttrs } from 'vue'
-import { vueFinalModalProps } from './VueFinalModalProps'
-import { useTransition } from './useTransition'
-import { useToClose } from './useToClose'
-import { useModelValue } from './useModelValue'
-import { useFocusTrap } from './useFocusTrap'
-import { useLockScroll } from './useBodyScrollLock'
-import { useZIndex } from './useZIndex'
-import { vVisible } from './vVisible'
-import { useInternalExposed } from './useInternalExposed'
+import { vueFinalModalProps } from '~/types'
+import { useTransition } from '~/composables/useTransition'
+import { useToClose } from '~/composables/useToClose'
+import { useModelValue } from '~/composables/useModelValue'
+import { useFocusTrap } from '~/composables/useFocusTrap'
+import { useLockScroll } from '~/composables/useBodyScrollLock'
+import { useZIndex } from '~/composables/useZIndex'
+import { vVisible } from '~/composables/vVisible'
+import { useInternalExposed } from '~/composables/useInternalExposed'
 import { arrayMoveItemToLast, arrayRemoveItem } from '~/utils'
-import { useSwipeToClose } from '~/useSwipeToClose'
-import { useVfm } from '~/useVfm'
+import { useSwipeToClose } from '~/composables/useSwipeToClose'
+import { useVfm } from '~/composables/useVfm'
 
 export interface VueFinalModalEmits {
   (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

@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
 import { onBeforeUnmount, watch } from 'vue'
-import type VueFinalModal from './VueFinalModal.vue'
+import type VueFinalModal from '~/components/VueFinalModal.vue'
+import type { ComponentProps } from '~/types'
 
 type BodyScrollOptions = {
   reserveScrollBarGap?: boolean
@@ -233,7 +234,7 @@ export const enableBodyScroll = (targetElement?: HTMLElement) => {
   }
 }
 
-export function useLockScroll(props: InstanceType<typeof VueFinalModal>['$props'], options: {
+export function useLockScroll(props: ComponentProps<typeof VueFinalModal>, options: {
   lockScrollEl: Ref<undefined | HTMLElement>
   modelValueLocal: Ref<boolean>
 }) {

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

@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import { useFocusTrap as _useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-import type VueFinalModal from './VueFinalModal.vue'
-import type { ComponentProps } from '~/Component'
+import type VueFinalModal from '~/components/VueFinalModal.vue'
+import type { ComponentProps } from '~/types'
 
 export function useFocusTrap(
   props: ComponentProps<typeof VueFinalModal>,

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

@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
 import { computed, toRef } from 'vue'
-import type { ComponentProps, ModalExposed, VueFinalModal } from '~/index'
+import type VueFinalModal from '~/components/VueFinalModal.vue'
+import type { ComponentProps, ModalExposed } from '~/types'
 import { noop, once } from '~/utils'
 
 export const useInternalExposed = function (