Merge pull request #304 from vue-final/feature/enhance-use-modal

hunterliu1003 · web-flow · commit 70963541a97f · 2023-01-11T15:17:29.000+08:00
feat: `useModal()` slots allow passing components directly
diff --git a/docs/components/content/BottomSheetPreview.vue b/docs/components/content/BottomSheetPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import BottomSheet from './BottomSheet.vue'
 
 const { open } = useModal({
-  component: markRaw(BottomSheet),
+  component: BottomSheet,
 })
 </script>
 
diff --git a/docs/components/content/DragResizeModalPreview.vue b/docs/components/content/DragResizeModalPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import DragResizeModal from './DragResizeModal.vue'
 
 const { open } = useModal({
-  component: markRaw(DragResizeModal),
+  component: DragResizeModal,
 })
 </script>
 
diff --git a/docs/components/content/FullscreenPreview.vue b/docs/components/content/FullscreenPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import Fullscreen from './Fullscreen.vue'
 
 const { open } = useModal({
-  component: markRaw(Fullscreen),
+  component: Fullscreen,
 })
 </script>
 
diff --git a/docs/components/content/LoginFormModalPreview.vue b/docs/components/content/LoginFormModalPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import LoginFormModal from './LoginFormModal.vue'
 
 const { open, close } = useModal<InstanceType<typeof LoginFormModal>['$props']>({
-  component: markRaw(LoginFormModal),
+  component: LoginFormModal,
   attrs: {
     onSubmit(formData) {
       alert(JSON.stringify(formData, null, 2))
diff --git a/docs/components/content/NestedModalPreview.vue b/docs/components/content/NestedModalPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import ConfirmModal from './ConfirmModal.vue'
 
 const confirm1 = useModal({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   attrs: {
     title: 'The first confirm modal',
     onConfirm() {
@@ -16,7 +16,7 @@ const confirm1 = useModal({
 })
 
 const confirm2 = useModal({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   attrs: {
     title: 'The second confirm modal',
     onConfirm() {
diff --git a/docs/components/content/PlainCssConfirmModalPreview.vue b/docs/components/content/PlainCssConfirmModalPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
 
 const { open, close } = useModal({
-  component: markRaw(PlainCssConfirmModal),
+  component: PlainCssConfirmModal,
   attrs: {
     title: 'Hello World!',
     onConfirm() {
diff --git a/docs/components/content/UseModalPreview.vue b/docs/components/content/UseModalPreview.vue
@@ -5,7 +5,7 @@ import ConfirmModal from './ConfirmModal.vue'
 const { open, close } = useModal<
   InstanceType<typeof ConfirmModal>['$props']
 >({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   attrs: {
     title: 'Hello World!',
     onConfirm() {
diff --git a/docs/content/2.get-started/1.guide/3.migration-guide.md b/docs/content/2.get-started/1.guide/3.migration-guide.md
@@ -81,7 +81,7 @@ So this:
 
 ```ts
 this.$vfm.show({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   bind: {
     name: 'ConfirmModalName'
   },
@@ -103,7 +103,7 @@ Will be re-written as this:
 
 ```ts
 const { open, close } = useModal<InstanceType<typeof ConfirmModal>['$props']>({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   attrs: {
     title: 'Hello World!',
     onConfirm() {
diff --git a/docs/content/2.get-started/1.guide/4.types.md b/docs/content/2.get-started/1.guide/4.types.md
@@ -20,22 +20,28 @@ export type ModalId = number | string | symbol
 export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
 ```
 
+## ModalSlot
+
+```ts
+export type ModalSlot<T extends Record<string, any> = {}> = string | Component | {
+  component: Component
+  attrs?: T
+}
+```
+
 ## UseModalOptionsPrivate
 
 ```ts
 export type UseModalOptionsPrivate<
-  ModalProps extends ComponentProps,
-  DefaultSlotProps extends ComponentProps,
+  ModalProps extends ComponentProps = {},
+  DefaultSlotProps extends ComponentProps = {},
 > = {
   context?: Vfm
   component: Component
   attrs?: ModalProps
   slots?: {
-    default: string | {
-      component: Component
-      attrs?: DefaultSlotProps
-    }
-    [key: string]: any
+    default: ModalSlot<DefaultSlotProps>
+    [key: string]: ModalSlot
   }
 
   id?: symbol
diff --git a/docs/content/3.api/2.composables/1.use-modal.md b/docs/content/3.api/2.composables/1.use-modal.md
@@ -24,13 +24,12 @@ import { ModalsContainer } from 'vue-final-modal'
 ## Usage
 
 ```ts
-import { markRaw } from 'vue'
 import { VueFinalModal, useModal } from 'vue-final-modal'
 
 const modalInstance = useModal<
   InstanceType<typeof VueFinalModal>['$props']
 >({
-  component: markRaw(VueFinalModal),
+  component: VueFinalModal,
   attrs: {
     // Props
     displayDirective: 'if',
@@ -43,7 +42,7 @@ const modalInstance = useModal<
     onClosed() { /* on closed */ },
   },
   slots: {
-    defaults: '<p>The content of the modal</p>'
+    default: '<p>The content of the modal</p>'
   }
 })
 
@@ -90,20 +89,19 @@ You have to manually calling `modalInstance.destroy()`{lang=ts} whenever you no
 - Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
   ```ts
   // Anywhere outside out script setup
-  import { markRaw } from 'vue'
   import { VueFinalModal, useModal } from 'vue-final-modal'
   import { vfm } from '@/plugins/vue-final-modal'
 
   export function openConfirmModal() {
     const modalInstance = useModal({
       context: vfm,
-      component: markRaw(MyConfirmModal),
+      component: MyConfirmModal,
       attrs: {
         onClosed() {
           modalInstance.destroy()
         },
       },
-      slots: { defaults: '<p>The content of the modal</p>' }
+      slots: { default: '<p>The content of the modal</p>' }
     })
 
     modalInstance.open()
@@ -126,20 +124,19 @@ You have to manually calling `modalInstance.destroy()`{lang=ts} whenever you no
 - Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
   ```ts
   // Anywhere outside out script setup
-  import { markRaw } from 'vue'
   import { VueFinalModal, useModal } from 'vue-final-modal'
   import { vfm } from '@/plugins/vue-final-modal'
 
   export function openConfirmModal() {
     const modalInstance = useModal({
       context: vfm,
-      component: markRaw(MyConfirmModal),
+      component: MyConfirmModal,
       attrs: {
         onClosed() {
           modalInstance.destroy()
         },
       },
-      slots: { defaults: '<p>The content of the modal</p>' }
+      slots: { default: '<p>The content of the modal</p>' }
     })
 
     modalInstance.open()
diff --git a/examples/nuxt3/components/MyModalPreview.vue b/examples/nuxt3/components/MyModalPreview.vue
@@ -3,7 +3,7 @@ import { useModal } from 'vue-final-modal'
 import MyModal from './MyModal.vue'
 
 const { open } = useModal<InstanceType<typeof MyModal>['$props']>({
-  component: markRaw(MyModal),
+  component: MyModal,
   attrs: {
     title: 'Hello World!',
   },
diff --git a/examples/vue3/src/components/MyModalPreview.vue b/examples/vue3/src/components/MyModalPreview.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { markRaw } from 'vue'
 import { useModal } from 'vue-final-modal'
 import MyModal from './MyModal.vue'
 import VButton from './VButton.vue'
 
 const { open } = useModal<InstanceType<typeof MyModal>['$props']>({
-  component: markRaw(MyModal),
+  component: MyModal,
   attrs: {
     title: 'Hello World!',
   },
diff --git a/packages/nuxt/playground/components/showConfirmModal.ts b/packages/nuxt/playground/components/showConfirmModal.ts
@@ -5,7 +5,7 @@ import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
 export function showConfirmModal(vfm: Vfm) {
   const { open, close, destroy } = useModal({
     context: vfm,
-    component: markRaw(PlainCssConfirmModal),
+    component: PlainCssConfirmModal,
     attrs: {
       title: 'Hello World!',
       onConfirm() {
diff --git a/packages/vue-final-modal/src/Modal.ts b/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: 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
diff --git a/packages/vue-final-modal/src/components/ModalsContainer.vue b/packages/vue-final-modal/src/components/ModalsContainer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount } from 'vue'
+import { isString } from '@vueuse/core'
 import { useInternalVfm, useVfm } from '~/useApi'
-import { isString } from '~/utils'
 
 const { modalsContainers, dynamicModals } = useVfm()
 const { resolvedClosed, resolvedOpened } = useInternalVfm()
@@ -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>
diff --git a/packages/vue-final-modal/src/useApi.ts b/packages/vue-final-modal/src/useApi.ts
@@ -1,8 +1,8 @@
-import { tryOnUnmounted } from '@vueuse/core'
-import { computed, inject, reactive, useAttrs } from 'vue'
+import { isString, tryOnUnmounted } from '@vueuse/core'
+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'
 
 /**
  * Returns the vfm instance. Equivalent to using `$vfm` inside
@@ -19,17 +19,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> {
+  ModalProps extends ComponentProps,
+  DefaultSlotProps extends ComponentProps = {},
+>(_options: UseModalOptions<ModalProps, DefaultSlotProps>): UseModalReturnType<ModalProps, DefaultSlotProps> {
   const options = reactive({
     id: Symbol('useModal'),
     modelValue: false,
-    ..._options,
+    ...withMarkRaw(_options),
   }) as UseModalOptionsPrivate<ModalProps, DefaultSlotProps>
 
   if (!options.context)
diff --git a/packages/vue-final-modal/src/utils.ts b/packages/vue-final-modal/src/utils.ts
@@ -12,7 +12,3 @@ export const noop = () => {}
 export function clamp(val: number, min: number, max: number) {
   return val > max ? max : val < min ? min : val
 }
-
-export function isString(str: any): str is string {
-  return typeof str === 'string'
-}
diff --git a/viteplay/src/components/ModalBottom/Basic.example.vue b/viteplay/src/components/ModalBottom/Basic.example.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { markRaw, ref } from 'vue'
+import { ref } from 'vue'
 import { ModalBottom, ModalsContainer, useModal, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 
@@ -12,7 +12,7 @@ const bottomSheet = useModal<
   InstanceType<typeof ModalBottom>['$props'],
   InstanceType<typeof DefaultSlot>['$props']
 >({
-  component: markRaw(ModalBottom),
+  component: ModalBottom,
   attrs: {
     background: 'interactive',
     contentStyle: {
@@ -21,7 +21,7 @@ const bottomSheet = useModal<
   },
   slots: {
     default: {
-      component: markRaw(DefaultSlot),
+      component: DefaultSlot,
       attrs: {
         text: '123',
         onCreate() {
diff --git a/viteplay/src/components/ModalFullscreen/Basic.example.vue b/viteplay/src/components/ModalFullscreen/Basic.example.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { markRaw, ref } from 'vue'
+import { ref } from 'vue'
 import { ModalFullscreen, ModalsContainer, useModal, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 
@@ -11,7 +11,7 @@ const fullscreenModal = useModal<
     InstanceType<typeof ModalFullscreen>['$props'],
     InstanceType<typeof DefaultSlot>['$props']
   >({
-    component: markRaw(ModalFullscreen),
+    component: ModalFullscreen,
     attrs: {
       background: 'interactive',
       closeDirection: 'RIGHT',
@@ -22,7 +22,7 @@ const fullscreenModal = useModal<
     },
     slots: {
       default: {
-        component: markRaw(DefaultSlot),
+        component: DefaultSlot,
         attrs: {
           text: '123',
 
diff --git a/viteplay/src/components/VueFinalModal/Basic.example.vue b/viteplay/src/components/VueFinalModal/Basic.example.vue
