feat: add useC2v API

Author: hunterliu1003

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, c2v } from './useApi'
+export { useVfm, useModal, useVfmAttrs, useC2v, c2v } from './useApi'
 
 declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {

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

@@ -52,6 +52,24 @@ function withMarkRaw<T extends Component>(options: Partial<UseModalOptions<T>>,
   }
 }
 
+/**
+ * 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),
+  }
+}
+
 /**
  * Create a dynamic modal.
  */

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ModalsContainer, VueFinalModal, c2v, useModal, useVfm } from 'vue-final-modal'
+import { ModalsContainer, VueFinalModal, c2v, useC2v, useModal, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 import { modal } from './modalsHelpers'
 import TestModal from './TestModal.vue'
@@ -79,6 +79,31 @@ function clickOutside() {
 // onMounted(() => {
 //   show.value = true
 // })
+
+const { open } = useC2v({
+  component: DefaultSlot,
+  attrs: {
+    text: 'c2v',
+  },
+  // slots: {
+  //   default: c2v({
+  //     component: DefaultSlot,
+  //     attrs: {
+  //       text: '456',
+  //     },
+  //     slots: {
+  //       default: c2v({
+  //         component: DefaultSlot,
+  //         attrs: {
+  //           text: '789',
+  //         },
+  //       }),
+  //     },
+  //   }),
+  // },
+})
+
+open()
 </script>
 
 <template>