refactor: split out useModal, useVfm, useC2v to individual files

Author: hunterliu1003

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

@@ -1,8 +1,8 @@
 import type { Component, PropType } from 'vue'
 import { defineComponent, h } from 'vue'
 import type { C2VOptions, UseModalOptions, UseModalOptionsPrivate } from '..'
-import { getSlots, isC2VOptions } from '~/useApi'
 import { isString, objectEntries } from '~/utils'
+import { getSlots, isC2VOptions } from '~/useC2v'
 
 export const DynamicModal = defineComponent({
   name: 'DynamicModal',

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

@@ -1,5 +1,5 @@
 import { computed, defineComponent, onBeforeUnmount } from 'vue'
-import { useVfm } from '~/useApi'
+import { useVfm } from '~/useVfm'
 
 export const ModalsContainer = defineComponent({
   name: 'ModalsContainer',

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

@@ -11,7 +11,7 @@ import { vVisible } from './vVisible'
 import { arrayMoveItemToLast, arrayRemoveItem, noop, once } from '~/utils'
 import { type ModalExposed } from '~/Modal'
 import { useSwipeToClose } from '~/useSwipeToClose'
-import { useVfm } from '~/useApi'
+import { useVfm } from '~/useVfm'
 import { getModalExposed } from '~/plugin'
 
 export interface VueFinalModalEmits {

packages/vue-final-modal/src/index.ts

@@ -21,7 +21,10 @@ export { vueFinalModalProps } from './components/VueFinalModal/VueFinalModalProp
 export type { VueFinalModalEmits } from './components/VueFinalModal/VueFinalModal.vue'
 
 /** Composables */
-export { useVfm, useModal, useVfmAttrs, useC2v, c2v } from './useApi'
+export { useC2v, c2v } from './useC2v'
+export { useVfm } from './useVfm'
+export { useModal } from './useModal'
+export { useVfmAttrs } from './useVfmAttrs'
 
 declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {

packages/vue-final-modal/src/useApi.ts

@@ -0,0 +1,53 @@
+import type { Component, VNode } from 'vue'
+import { h } from 'vue'
+import { tryOnUnmounted } from '@vueuse/core'
+import type { C2VOptions } from './Modal'
+import { pushVNode, removeVNode } from './useVfm'
+import type { ComponentSlots } from './Component'
+import { isString, objectEntries } from './utils'
+
+/**
+ * Create a dynamic vNode.
+ */
+export function useC2v<T extends Component>(_options: C2VOptions<T>) {
+  const id = Symbol(__DEV__ ? 'useC2v' : '')
+
+  const vNode = h(_options.component, { key: id, ..._options.attrs }, _options.slots)
+
+  tryOnUnmounted(() => {
+    removeVNode(vNode)
+  })
+
+  return {
+    open: () => pushVNode(vNode),
+    close: () => removeVNode(vNode),
+  }
+}
+
+/** Convert Component Options to VNode */
+export function c2v<T extends Component>(options: C2VOptions<T>) {
+  return options
+}
+
+export function isC2VOptions<T extends Component>(value: unknown): value is C2VOptions<T> {
+  if (typeof value === 'object' && value !== null)
+    return 'component' in value
+  else
+    return false
+}
+
+export function getSlots<T extends Component>(slots: {
+  [K in keyof ComponentSlots<T>]?: string | Component | C2VOptions<Component>
+}) {
+  return objectEntries(slots || {}).reduce((acc, cur) => {
+    const slotName = cur[0] as string
+    const slot = cur[1] as string | Component | C2VOptions<any>
+    if (isString(slot))
+      acc[slotName] = () => h('div', { innerHTML: slot })
+    else if (isC2VOptions(slot))
+      acc[slotName] = () => h(slot.component, slot.attrs, slot.slots ? getSlots(slot.slots) : undefined)
+    else
+      acc[slotName] = () => h(slot)
+    return acc
+  }, {} as Record<string, () => VNode>)
+}