refactor: rename type Modal to ModalExposed

Author: hunterliu1003

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

@@ -1,4 +1,4 @@
-import type { App, CSSProperties, ComputedRef, FunctionalComponent, Raw, Ref } from 'vue'
+import type { App, CSSProperties, ComponentInternalInstance, FunctionalComponent, Raw, Ref } from 'vue'
 
 export type ModalId = number | string | symbol
 export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
@@ -52,22 +52,22 @@ export interface UseModalReturnType<T extends ComponentType> {
 
 export type Vfm = {
   install(app: App): void
-  modals: ComputedRef<Modal>[]
-  openedModals: ComputedRef<Modal>[]
-  openedModalOverlays: ComputedRef<Modal>[]
+  modals: ComponentInternalInstance[]
+  openedModals: ComponentInternalInstance[]
+  openedModalOverlays: ComponentInternalInstance[]
   dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[]
   modalsContainers: Ref<symbol[]>
-  get: (modalId: ModalId) => undefined | ComputedRef<Modal>
+  get: (modalId: ModalId) => undefined | ComponentInternalInstance
   toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
   open: (modalId: ModalId) => undefined | Promise<string>
   close: (modalId: ModalId) => undefined | Promise<string>
   closeAll: () => Promise<PromiseSettledResult<string>[]>
 }
 
-export type Modal = {
+export type ModalExposed = {
   modalId?: ModalId
-  hideOverlay: Ref<boolean | undefined> | undefined
-  overlayBehavior: Ref<'auto' | 'persist'>
-  overlayVisible: Ref<boolean>
+  hideOverlay?: boolean
+  overlayBehavior: 'auto' | 'persist'
+  overlayVisible: boolean
   toggle: (show?: boolean) => Promise<string>
 }

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRef, useAttrs, watch } from 'vue'
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'
 import { vueFinalModalProps } from './VueFinalModalProps'
 import { useTransition } from './useTransition'
 import { useToClose } from './useToClose'
@@ -9,9 +9,10 @@ import { useLockScroll } from './useBodyScrollLock'
 import { useZIndex } from './useZIndex'
 import { vVisible } from './vVisible'
 import { arrayMoveItemToLast, arrayRemoveItem, noop, once } from '~/utils'
-import { type Modal } from '~/Modal'
+import { type ModalExposed } from '~/Modal'
 import { useSwipeToClose } from '~/useSwipeToClose'
 import { useVfm } from '~/useApi'
+import { getModalExposed } from '~/plugin'
 
 export interface VueFinalModalEmits {
   (e: 'update:modelValue', modelValue: boolean): void
@@ -31,6 +32,8 @@ const attrs = useAttrs()
 
 defineOptions({ inheritAttrs: false })
 
+const instance = getCurrentInstance()
+
 defineSlots<{
   'default'(): void
   'swipe-banner'(): void
@@ -77,7 +80,7 @@ const {
     resolveToggle('opened')
   },
   onLeave() {
-    arrayRemoveItem(openedModals, modalInstance)
+    arrayRemoveItem(openedModals, instance)
     resetZIndex()
     enableBodyScroll()
     emit('closed')
@@ -93,24 +96,7 @@ const {
   onTouchStartSwipeBanner,
 } = useSwipeToClose(props, { vfmContentEl, modelValueLocal })
 
-const hideOverlay = toRef(props, 'hideOverlay')
-const overlayBehavior = toRef(props, 'overlayBehavior')
-const modalInstance = computed<Modal>(() => ({
-  modalId: props.modalId,
-  hideOverlay,
-  overlayBehavior,
-  overlayVisible,
-  toggle(show?: boolean): Promise<string> {
-    return new Promise((resolve) => {
-      resolveToggle = once((res: string) => resolve(res))
-
-      const value = typeof show === 'boolean' ? show : !modelValueLocal.value
-      modelValueLocal.value = value
-    })
-  },
-}))
-
-const index = computed(() => openedModals.indexOf(modalInstance))
+const index = computed(() => instance ? openedModals.indexOf(instance) : -1)
 
 watch([() => props.zIndexFn, index], () => {
   if (!visible.value)
@@ -119,7 +105,7 @@ watch([() => props.zIndexFn, index], () => {
 })
 
 onMounted(() => {
-  arrayMoveItemToLast(modals, modalInstance)
+  arrayMoveItemToLast(modals, instance)
 })
 
 if (props.modelValue)
@@ -130,8 +116,8 @@ function open(): boolean {
   emit('beforeOpen', { stop: () => shouldStop = true })
   if (shouldStop)
     return false
-  arrayMoveItemToLast(openedModals, modalInstance)
-  arrayMoveItemToLast(openedModalOverlays, modalInstance)
+  arrayMoveItemToLast(openedModals, instance)
+  arrayMoveItemToLast(openedModalOverlays, instance)
   openLastOverlay()
   enterTransition()
   return true
@@ -142,7 +128,7 @@ function close(): boolean {
   emit('beforeClose', { stop: () => shouldStop = true })
   if (shouldStop)
     return false
-  arrayRemoveItem(openedModalOverlays, modalInstance)
+  arrayRemoveItem(openedModalOverlays, instance)
   openLastOverlay()
   blur()
   leaveTransition()
@@ -151,21 +137,46 @@ function close(): boolean {
 
 onBeforeUnmount(() => {
   enableBodyScroll()
-  arrayRemoveItem(modals, modalInstance)
-  arrayRemoveItem(openedModals, modalInstance)
+  arrayRemoveItem(modals, instance)
+  arrayRemoveItem(openedModals, instance)
   blur()
   openLastOverlay()
 })
 
 async function openLastOverlay() {
   await nextTick()
   // Found the modals which has overlay and has `auto` overlayBehavior
-  const openedModalsOverlaysAuto = openedModalOverlays.filter(modal => modal.value.overlayBehavior.value === 'auto' && !modal.value.hideOverlay?.value)
+  const openedModalsOverlaysAuto = openedModalOverlays.filter((modal) => {
+    const modalExposed = getModalExposed(modal)
+    return modalExposed?.value.overlayBehavior === 'auto' && !modalExposed?.value.hideOverlay
+  })
   // Only keep the last overlay open
   openedModalsOverlaysAuto.forEach((modal, index) => {
-    modal.value.overlayVisible.value = index === openedModalsOverlaysAuto.length - 1
+    const modalExposed = getModalExposed(modal)
+    if (!modalExposed?.value)
+      return
+    modalExposed.value.overlayVisible = index === openedModalsOverlaysAuto.length - 1
   })
 }
+
+const modalExposed = computed<ModalExposed>(() => ({
+  modalId: props.modalId,
+  hideOverlay: props.hideOverlay,
+  overlayBehavior: props.overlayBehavior,
+  overlayVisible: overlayVisible.value,
+  toggle(show?: boolean): Promise<string> {
+    return new Promise((resolve) => {
+      resolveToggle = once((res: string) => resolve(res))
+
+      const value = typeof show === 'boolean' ? show : !modelValueLocal.value
+      modelValueLocal.value = value
+    })
+  },
+}))
+
+defineExpose({
+  modalExposed,
+})
 </script>
 
 <template>
@@ -185,7 +196,7 @@ async function openLastOverlay() {
       @mouseup.self="() => onMouseupRoot()"
       @mousedown.self="e => onMousedown(e)"
     >
-      <Transition v-if="!hideOverlay" v-bind="(overlayTransition as object)" v-on="overlayListeners">
+      <Transition v-if="!hideOverlay" v-bind="overlayTransition as object" v-on="overlayListeners">
         <div
           v-if="displayDirective !== 'if' || overlayVisible"
           v-show="displayDirective !== 'show' || overlayVisible"
@@ -196,7 +207,7 @@ async function openLastOverlay() {
           aria-hidden="true"
         />
       </Transition>
-      <Transition v-bind="(contentTransition as object)" v-on="contentListeners">
+      <Transition v-bind="contentTransition as object" v-on="contentListeners">
         <div
           v-if="displayDirective !== 'if' || contentVisible"
           v-show="displayDirective !== 'show' || contentVisible"

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

@@ -7,7 +7,7 @@ import type { Vfm } from './Modal'
 export * from './Modal'
 
 /** Plugin */
-export * from './plugin'
+export { createVfm, getModalExposed } from './plugin'
 
 /** Components */
 export {

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

@@ -1,7 +1,7 @@
-import type { App, ComputedRef } from 'vue'
+import type { App, ComponentInternalInstance, ComputedRef } from 'vue'
 import { getCurrentInstance, inject, markRaw, ref, shallowReactive } from 'vue'
 import { vfmSymbol } from './injectionSymbols'
-import type { Modal, ModalId, UseModalOptions, UseModalOptionsPrivate, Vfm } from './Modal'
+import type { ModalExposed, ModalId, UseModalOptions, UseModalOptionsPrivate, Vfm } from './Modal'
 import { noop } from './utils'
 
 // eslint-disable-next-line import/no-mutable-exports
@@ -28,9 +28,9 @@ export const getActiveVfm = () =>
   (getCurrentInstance() && inject(vfmSymbol, defaultVfm)) || activeVfm
 
 export function createVfm() {
-  const modals: ComputedRef<Modal>[] = shallowReactive([])
-  const openedModals: ComputedRef<Modal>[] = shallowReactive([])
-  const openedModalOverlays: ComputedRef<Modal>[] = shallowReactive([])
+  const modals: ComponentInternalInstance[] = shallowReactive([])
+  const openedModals: ComponentInternalInstance[] = shallowReactive([])
+  const openedModalOverlays: ComponentInternalInstance[] = shallowReactive([])
   const dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[] = shallowReactive([])
   const modalsContainers = ref<symbol[]>([])
 
@@ -45,11 +45,14 @@ export function createVfm() {
     dynamicModals,
     modalsContainers,
     get(modalId: ModalId) {
-      return modals.find(modal => modal.value.modalId && modalId === modal.value.modalId)
+      return modals.find((modal) => {
+        const modalExposed = getModalExposed(modal)
+        return modalExposed?.value.modalId && modalId === modalExposed?.value.modalId
+      })
     },
     toggle(modalId: ModalId, show?: boolean) {
       const modal = vfm.get(modalId)
-      return modal?.value.toggle(show)
+      return getModalExposed(modal)?.value.toggle(show)
     },
     open(modalId: ModalId) {
       return vfm.toggle(modalId, true)
@@ -58,11 +61,18 @@ export function createVfm() {
       return vfm.toggle(modalId, false)
     },
     closeAll() {
-      return Promise.allSettled(openedModals.map(modal => modal.value.toggle(false)))
+      return Promise.allSettled(openedModals
+        .map(modal => getModalExposed(modal))
+        .filter((modal): modal is ComputedRef<ModalExposed> => !!modal)
+        .map(modal => modal.value.toggle(false)))
     },
   })
 
   setActiveVfm(vfm)
 
   return vfm
 }
+
+export function getModalExposed(componentInternalInstance: undefined | null | ComponentInternalInstance): null | ComputedRef<ModalExposed> {
+  return componentInternalInstance?.exposed?.modalExposed || null
+}