refactor: update implement

Author: Mini-ghost

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

@@ -5,7 +5,7 @@ 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 | {
+export type ModalSlot<T extends Record<string, any> = {}> = string | Component | {
   component: Component
   attrs?: T
 }
@@ -28,7 +28,7 @@ export type UseModalOptionsPrivate<
   resolveClosed?: () => void
 }
 
-export type ModalOptions<
+export type UseModalOptions<
 ModalProps extends ComponentProps,
 DefaultSlotProps extends ComponentProps = {},
 > = Pick<
@@ -39,21 +39,11 @@ UseModalOptionsPrivate<ModalProps, DefaultSlotProps>,
 | 'slots'
 >
 
-export type UseModalOptions<
-  ModalProps extends ComponentProps,
-  DefaultSlotProps extends ComponentProps = {},
-> = Omit<ModalOptions<ModalProps, DefaultSlotProps>, 'slots'> & {
-  slots?: {
-    default: ModalSlot<DefaultSlotProps> | Component
-    [key: string]: ModalSlot | Component
-  }
-}
-
 export type UseModalReturnType<ModalProps extends ComponentProps, DefaultSlotProps extends ComponentProps> = {
-  options: ModalOptions<ModalProps, DefaultSlotProps>
+  options: UseModalOptions<ModalProps, DefaultSlotProps>
   open: () => Promise<string>
   close: () => Promise<string>
-  patchOptions: (options: ModalOptions<ModalProps, DefaultSlotProps>) => void
+  patchOptions: (options: UseModalOptions<ModalProps, DefaultSlotProps>) => void
   destroy: () => void
 }
 

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

@@ -30,9 +30,13 @@ onBeforeUnmount(() => {
         <div v-if="isString(slot)" v-html="slot" />
         <component
           :is="slot.component"
-          v-else
+          v-else-if="'component' in slot"
           v-bind="slot.attrs"
         />
+        <component
+          :is="slot"
+          v-else
+        />
       </template>
     </component>
   </template>

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

@@ -1,9 +1,8 @@
 import { tryOnUnmounted } from '@vueuse/core'
-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 type { ComponentProps, InternalVfm, ModalSlot, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
 import { isString } from './utils'
 
 /**
@@ -21,47 +20,46 @@ export function useInternalVfm(): InternalVfm {
   return inject(internalVfmSymbol)!
 }
 
+function withMarkRaw<
+ModalProps extends ComponentProps,
+DefaultSlotProps extends ComponentProps = {},
+>(options: UseModalOptions<ModalProps, DefaultSlotProps>) {
+  const { component, slots: innerSlots, ...rest } = options
+
+  const slots = typeof innerSlots === 'undefined'
+    ? undefined
+    : Object.fromEntries<ModalSlot>(Object.entries(innerSlots).map(([name, maybeComponent]) => {
+      if (isString(maybeComponent))
+        return [name, maybeComponent] as const
+
+      if ('component' in maybeComponent) {
+        return [name, {
+          ...maybeComponent,
+          component: markRaw(maybeComponent.component),
+        }]
+      }
+
+      return [name, markRaw(maybeComponent)]
+    }))
+
+  return {
+    ...rest,
+    component: markRaw(component),
+    slots,
+  }
+}
+
 /**
  * Define a dynamic modal.
  */
 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,
-    component: markRaw(component),
-    slots,
-    ...rest,
+    ...withMarkRaw(_options),
   }) as UseModalOptionsPrivate<ModalProps, DefaultSlotProps>
 
   if (!options.context)