feat: useModal() slots allow passing components directly

Author: Mini-ghost

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

@@ -5,6 +5,11 @@ export type ComponentProps = ComponentPublicInstance['$props']
 export type ModalId = number | string | symbol
 export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
 
+export type ModalSlot<T extends Record<string, any> = {}> = string | {
+  component: Component
+  attrs?: T
+}
+
 export type UseModalOptionsPrivate<
   ModalProps extends ComponentProps = {},
   DefaultSlotProps extends ComponentProps = {},
@@ -13,11 +18,8 @@ export type UseModalOptionsPrivate<
   component: Component
   attrs?: ModalProps
   slots?: {
-    default: string | {
-      component: Component
-      attrs?: DefaultSlotProps
-    }
-    [key: string]: any
+    default: ModalSlot<DefaultSlotProps>
+    [key: string]: ModalSlot
   }
 
   id?: symbol
@@ -26,22 +28,32 @@ export type UseModalOptionsPrivate<
   resolveClosed?: () => void
 }
 
+export type ModalOptions<
+ModalProps extends ComponentProps,
+DefaultSlotProps extends ComponentProps = {},
+> = Pick<
+UseModalOptionsPrivate<ModalProps, DefaultSlotProps>,
+| 'context'
+| 'component'
+| 'attrs'
+| 'slots'
+>
+
 export type UseModalOptions<
   ModalProps extends ComponentProps,
   DefaultSlotProps extends ComponentProps = {},
-> = Pick<
-  UseModalOptionsPrivate<ModalProps, DefaultSlotProps>,
-  | 'context'
-  | 'component'
-  | 'attrs'
-  | 'slots'
->
+> = Omit<ModalOptions<ModalProps, DefaultSlotProps>, 'slots'> & {
+  slots?: {
+    default: ModalSlot<DefaultSlotProps> | Component
+    [key: string]: ModalSlot | Component
+  }
+}
 
 export type UseModalReturnType<ModalProps extends ComponentProps, DefaultSlotProps extends ComponentProps> = {
-  options: UseModalOptions<ModalProps, DefaultSlotProps>
+  options: ModalOptions<ModalProps, DefaultSlotProps>
   open: () => Promise<string>
   close: () => Promise<string>
-  patchOptions: (options: UseModalOptions<ModalProps, DefaultSlotProps>) => void
+  patchOptions: (options: ModalOptions<ModalProps, DefaultSlotProps>) => void
   destroy: () => void
 }
 

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

@@ -1,8 +1,10 @@
 import { tryOnUnmounted } from '@vueuse/core'
-import { computed, inject, reactive, useAttrs } from 'vue'
+import type { Component } from 'vue'
+import { computed, inject, markRaw, reactive, useAttrs } from 'vue'
 import type CoreModal from './components/CoreModal/CoreModal.vue'
 import { internalVfmSymbol, vfmSymbol } from './injectionSymbols'
 import type { ComponentProps, InternalVfm, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
+import { isString } from './utils'
 
 /**
  * Returns the vfm instance. Equivalent to using `$vfm` inside
@@ -26,10 +28,40 @@ function defineModal<
     ModalProps extends ComponentProps,
     DefaultSlotProps extends ComponentProps = {},
   >(_options: UseModalOptions<ModalProps, DefaultSlotProps>): UseModalReturnType<ModalProps, DefaultSlotProps> {
+  const { component, slots: innerSlots, ...rest } = _options
+
+  const slots = typeof innerSlots !== 'undefined'
+    ? Object.fromEntries<string | {
+      component: Component
+      attrs?: any
+    }>(
+      Object.entries(innerSlots).map(([name, maybeComponent]) => {
+        if (isString(maybeComponent))
+          return [name, maybeComponent]
+
+        if ('component' in maybeComponent) {
+          return [name, {
+            component: markRaw(maybeComponent.component),
+            attrs: maybeComponent.attrs,
+          }] as const
+        }
+
+        return [
+          name,
+          {
+            component: markRaw(maybeComponent),
+          },
+        ] as const
+      }),
+    )
+    : undefined
+
   const options = reactive({
     id: Symbol('useModal'),
     modelValue: false,
-    ..._options,
+    component: markRaw(component),
+    slots,
+    ...rest,
   }) as UseModalOptionsPrivate<ModalProps, DefaultSlotProps>
 
   if (!options.context)