feat: rename useModalSlot to c2v and support infinite nested slots to useModal

Author: hunterliu1003

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

@@ -14,25 +14,25 @@ export type ModalId = number | string | symbol
 export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
 ```
 
-## ModalSlot
+## C2VOptions
 
 ```ts
-export interface ModalSlotOptions { component: Raw<ComponentType>; attrs?: Record<string, any> }
-export type ModalSlot = string | ComponentType | ModalSlotOptions
+export type C2VOptions<T extends Component> = {
+  component: T
+  attrs?: ComponentProps<T>
+  slots?: {
+    [K in keyof ComponentSlots<T>]?: string | Component | C2VOptions<Component>
+  }
+}
 ```
 
 ## UseModalOptions
 
 ```ts
-export type UseModalOptions<T extends ComponentType> = {
+export type UseModalOptions<T extends Component> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
-  component?: T
-  attrs?: ComponentProps<T>
-  slots?: {
-    [key: string]: ModalSlot
-  }
-}
+} & C2VOptions<T>
 ```
 
 ## UseModalOptionsPrivate
@@ -49,7 +49,7 @@ export type UseModalOptionsPrivate = {
 ## UseModalReturnType
 
 ```ts
-export interface UseModalReturnType<T extends ComponentType> {
+export interface UseModalReturnType<T extends Component> {
   options: UseModalOptions<T> & UseModalOptionsPrivate
   open: () => Promise<string>
   close: () => Promise<string>

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

@@ -115,15 +115,15 @@ const modalInstance = useModal({
 #### with `Component`, `Props` and `Events`
 
 ```ts
-import { VueFinalModal, useModal, useModalSlot } from 'vue-final-modal'
+import { VueFinalModal, useModal, c2v } from 'vue-final-modal'
 // ModalContent is the component you want to put into the modal content
 import ModalContent from './ModalContent.vue'
 
 const modalInstance = useModal({
   component: VueFinalModal,
   attrs: { ... },
   slots: {
-    default: useModalSlot({
+    default: c2v({
       component: ModalContent,
       attrs: {
         // Bind ModalContent props
@@ -137,7 +137,7 @@ const modalInstance = useModal({
 ```
 
 ::alert{type=info}
-`useModalSlot()` is a function that provides better DX for type checking. It just returns the same object you passed in.
+`c2v()` is a function that provides better DX for type checking. It just returns the same object you passed in.
 ::
 
 ## Type Declarations

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

@@ -1,24 +1,25 @@
-import type { App, CSSProperties, Component, ComponentInternalInstance, FunctionalComponent, Raw, Ref } from 'vue'
+import type { App, CSSProperties, Component, ComponentInternalInstance, Ref } from 'vue'
 import type { ComponentProps, ComponentSlots } from './Component'
 import type { H } from './h'
 
 export type ModalId = number | string | symbol
 export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
 
-export interface ModalSlotOptions { component: Raw<Component>; attrs?: Record<string, any> }
-export type ModalSlot = string | Component | ModalSlotOptions
-
-type ComponentConstructor = (abstract new (...args: any) => any)
-/** Including both generic and non-generic vue components */
-export type ComponentType = ComponentConstructor | FunctionalComponent<any, any>
+export type C2VOptions<T extends Component> = {
+  component: T
+  attrs?: ComponentProps<T>
+  slots?: {
+    [K in keyof ComponentSlots<T>]?: string | Component | C2VOptions<Component>
+  }
+}
 
 export type UseModalOptions<T extends Component> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
   component?: T
   attrs?: ComponentProps<T>
   slots?: {
-    [K in keyof ComponentSlots<T>]?: ModalSlot
+    [K in keyof ComponentSlots<T>]?: string | Component | C2VOptions<Component>
   }
 }
 

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

@@ -1,7 +1,7 @@
 import type { Component, PropType } from 'vue'
 import { defineComponent, h } from 'vue'
-import type { ModalSlotOptions, UseModalOptions, UseModalOptionsPrivate } from '..'
-import { isModalSlotOptions } from '~/useApi'
+import type { C2VOptions, UseModalOptions, UseModalOptionsPrivate } from '..'
+import { getSlots, isC2VOptions } from '~/useApi'
 import { isString, objectEntries } from '~/utils'
 
 export const DynamicModal = defineComponent({
@@ -18,11 +18,11 @@ export const DynamicModal = defineComponent({
         return null
       const slots = objectEntries(modal.slots || {}).reduce((acc, cur) => {
         const slotName = cur[0] as string
-        const slot = cur[1] as string | Component | ModalSlotOptions
+        const slot = cur[1] as string | Component | C2VOptions<Component>
         if (isString(slot))
           acc[slotName] = () => h('div', { innerHTML: slot })
-        else if (isModalSlotOptions(slot))
-          acc[slotName] = () => h(slot.component, slot.attrs)
+        else if (isC2VOptions(slot))
+          acc[slotName] = () => h(slot.component, slot.attrs, slot.slots ? getSlots(slot.slots) : undefined)
         else
           acc[slotName] = () => h(slot)
         return acc

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

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

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

@@ -2,9 +2,9 @@ import type { Component, VNode } from 'vue'
 import { computed, h, markRaw, nextTick, reactive, useAttrs } from 'vue'
 import { tryOnUnmounted } from '@vueuse/core'
 import VueFinalModal from './components/VueFinalModal/VueFinalModal.vue'
-import type { ModalSlotOptions, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
+import type { C2VOptions, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
 import { activeVfm, getActiveVfm } from './plugin'
-import type { ComponentEmit, ComponentProps } from './Component'
+import type { ComponentEmit, ComponentProps, ComponentSlots } from './Component'
 import { DynamicModal } from './components/DynamicModal'
 import { isString, objectEntries } from '~/utils'
 
@@ -35,7 +35,7 @@ function withMarkRaw<T extends Component>(options: Partial<UseModalOptions<T>>,
       if (isString(maybeComponent))
         return [name, maybeComponent] as const
 
-      if (isModalSlotOptions(maybeComponent)) {
+      if (isC2VOptions(maybeComponent)) {
         return [name, {
           ...maybeComponent,
           component: markRaw(maybeComponent.component),
@@ -125,7 +125,7 @@ export function useModal<T extends Component = typeof VueFinalModal>(_options: U
         const originSlot = options.slots![name]
         if (isString(originSlot))
           options.slots![name] = slot
-        else if (isModalSlotOptions(originSlot) && isModalSlotOptions(slot))
+        else if (isC2VOptions(originSlot) && isC2VOptions(slot))
           patchComponentOptions(originSlot, slot)
         else
           options.slots![name] = slot
@@ -143,8 +143,8 @@ export function useModal<T extends Component = typeof VueFinalModal>(_options: U
 }
 
 function patchComponentOptions<T extends Component>(
-  options: UseModalOptions<T> | ModalSlotOptions,
-  newOptions: Partial<UseModalOptions<T>> | ModalSlotOptions,
+  options: UseModalOptions<T> | C2VOptions<Component>,
+  newOptions: Partial<UseModalOptions<T>> | C2VOptions<Component>,
 ) {
   if (newOptions.component)
     options.component = newOptions.component
@@ -182,20 +182,34 @@ function removeVNode(vNode: VNode): void {
   vfm.h.remove(vNode)
 }
 
-export function useModalSlot<T extends Component>(options: {
-  component: T
-  attrs?: ComponentProps<T>
-}) {
-  return options
-}
-
-export function isModalSlotOptions(value: unknown): value is ModalSlotOptions {
+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
 }
 
+/** Convert Component Options to VNode */
+export function c2v<T extends Component>(options: C2VOptions<T>) {
+  return options
+}
+
+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>)
+}
+
 export function pickModalProps(props: Record<string, any>, modalProps: Record<string, any>) {
   return Object.keys(modalProps).reduce<Record<string, any>>((acc, propName) => {
     acc[propName] = props?.[propName]

viteplay/src/components/DefaultSlot.vue

@@ -19,5 +19,6 @@ const count = ref(0)
     <div>default slot component {{ text }}</div>
     <button>Click Button!</button>
     <input v-model="count" type="number">
+    <slot />
   </div>
 </template>

viteplay/src/components/VueFinalModal/Basic.example.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ModalsContainer, VueFinalModal, useModal, useModalSlot, useVfm } from 'vue-final-modal'
+import { ModalsContainer, VueFinalModal, c2v, useModal, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 import { modal } from './modalsHelpers'
 import TestModal from './TestModal.vue'
@@ -28,13 +28,26 @@ const modal1 = useModal({
     onBeforeOpen() { console.log('onBeforeOpen') },
   },
   slots: {
-    default: useModalSlot({
+    default: c2v({
       component: DefaultSlot,
       attrs: {
         text: '123',
-        onCreate() {
-          // console.log('onCreated')
-        },
+      },
+      slots: {
+        default: c2v({
+          component: DefaultSlot,
+          attrs: {
+            text: '456',
+          },
+          slots: {
+            default: c2v({
+              component: DefaultSlot,
+              attrs: {
+                text: '789',
+              },
+            }),
+          },
+        }),
       },
     }),
   },

viteplay/src/components/VueFinalModal/BottomSheet.example.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ModalsContainer, useModal, useModalSlot } from 'vue-final-modal'
+import { ModalsContainer, useModal, c2v } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 
 const bottomSheet = useModal({
@@ -19,7 +19,7 @@ const bottomSheet = useModal({
     contentTransition: { name: 'vfm-slide-down' },
   },
   slots: {
-    default: useModalSlot({
+    default: c2v({
       component: DefaultSlot,
       attrs: {
         text: 'a bottom sheet modal',

viteplay/src/components/VueFinalModal/CreateH.example.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ModalsContainer, useModal } from 'vue-final-modal'
+import DefaultSlot from '../DefaultSlot.vue'
+
+useModal({
+  defaultModelValue: true,
+  component: DefaultSlot,
+  attrs: {
+    text: '123',
+    onCreate() {
+      // console.log('onCreated')
+    },
+  },
+})
+</script>
+
+<template>
+  <ModalsContainer />
+</template>