Merge pull request #412 from vue-final/fix/405

Fix/405

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,32 +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 InternalVfm = {
-  openLastOverlay: () => Promise<void>
-  moveToLastOpenedModals: (modal: ComputedRef<Modal>) => void
-  deleteFromOpenedModals: (modal: ComputedRef<Modal>) => void
-  moveToLastOpenedModalOverlays: (modal: ComputedRef<Modal>) => void
-  deleteFromOpenedModalOverlays: (modal: ComputedRef<Modal>) => void
-  deleteFromModals: (modal: ComputedRef<Modal>) => void
-  resolvedClosed: (index: number) => void
-  resolvedOpened: (index: number) => void
-}
-
-export type Modal = {
-  modalId?: ModalId
-  hideOverlay: Ref<boolean | undefined> | undefined
+export type ModalExposed = {
+  modalId?: Ref<undefined | ModalId>
+  hideOverlay?: Ref<undefined | boolean>
+  overlayBehavior: Ref<'auto' | 'persist'>
   overlayVisible: Ref<boolean>
   toggle: (show?: boolean) => Promise<string>
 }

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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount } from 'vue'
 import { isString } from '~/utils'
-import { useInternalVfm, useVfm } from '~/useApi'
+import { useVfm } from '~/useApi'
 
 const { modalsContainers, dynamicModals } = useVfm()
-const { resolvedClosed, resolvedOpened } = useInternalVfm()
 
 const uid = Symbol('ModalsContainer')
 const shouldMount = computed(() => uid === modalsContainers.value?.[0])
@@ -13,6 +12,16 @@ modalsContainers.value.push(uid)
 onBeforeUnmount(() => {
   modalsContainers.value = modalsContainers.value.filter(i => i !== uid)
 })
+
+function resolvedClosed(index: number) {
+  dynamicModals[index]?.resolveClosed?.()
+  if (!dynamicModals[index]?.keepAlive)
+    dynamicModals.splice(index, 1)
+}
+
+function resolvedOpened(index: number) {
+  dynamicModals[index]?.resolveOpened?.()
+}
 </script>
 
 <template>

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, toRef, useAttrs, watch } from 'vue'
 import { vueFinalModalProps } from './VueFinalModalProps'
 import { useTransition } from './useTransition'
 import { useToClose } from './useToClose'
@@ -8,10 +8,11 @@ import { useFocusTrap } from './useFocusTrap'
 import { useLockScroll } from './useBodyScrollLock'
 import { useZIndex } from './useZIndex'
 import { vVisible } from './vVisible'
-import { noop, once } from '~/utils'
-import { type Modal } from '~/Modal'
+import { arrayMoveItemToLast, arrayRemoveItem, noop, once } from '~/utils'
+import { type ModalExposed } from '~/Modal'
 import { useSwipeToClose } from '~/useSwipeToClose'
-import { useInternalVfm, useVfm } from '~/useApi'
+import { useVfm } from '~/useApi'
+import { getModalExposed } from '~/plugin'
 
 export interface VueFinalModalEmits {
   (e: 'update:modelValue', modelValue: boolean): void
@@ -26,30 +27,19 @@ export interface VueFinalModalEmits {
 }
 
 const props = defineProps(vueFinalModalProps)
-
 const emit = defineEmits<VueFinalModalEmits>()
-
 const attrs = useAttrs()
 
-defineOptions({
-  inheritAttrs: false,
-})
+defineOptions({ inheritAttrs: false })
+
+const instance = getCurrentInstance()
 
 defineSlots<{
   'default'(): void
   'swipe-banner'(): void
 }>()
 
-const { modals, openedModals } = useVfm()
-
-const {
-  openLastOverlay,
-  moveToLastOpenedModals,
-  deleteFromOpenedModals,
-  moveToLastOpenedModalOverlays,
-  deleteFromOpenedModalOverlays,
-  deleteFromModals,
-} = useInternalVfm()
+const { modals, openedModals, openedModalOverlays } = useVfm()
 
 const vfmRootEl = ref<HTMLDivElement>()
 const vfmContentEl = ref<HTMLDivElement>()
@@ -90,7 +80,7 @@ const {
     resolveToggle('opened')
   },
   onLeave() {
-    deleteFromOpenedModals(getModalInstance())
+    arrayRemoveItem(openedModals, instance)
     resetZIndex()
     enableBodyScroll()
     emit('closed')
@@ -106,36 +96,16 @@ const {
   onTouchStartSwipeBanner,
 } = useSwipeToClose(props, { vfmContentEl, modelValueLocal })
 
-const hideOverlay = toRef(props, 'hideOverlay')
-const modalInstance = computed<Modal>(() => ({
-  modalId: props.modalId,
-  hideOverlay,
-  overlayVisible,
-  focus,
-  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
-      emit('update:modelValue', value)
-    })
-  },
-}))
-
-function getModalInstance() {
-  return modalInstance
-}
-
-const index = computed(() => openedModals.indexOf(modalInstance))
+const index = computed(() => instance ? openedModals.indexOf(instance) : -1)
 
 watch([() => props.zIndexFn, index], () => {
-  if (visible.value)
-    refreshZIndex(index.value)
+  if (!visible.value)
+    return
+  refreshZIndex(index.value)
 })
 
 onMounted(() => {
-  modals.push(modalInstance)
+  arrayMoveItemToLast(modals, instance)
 })
 
 if (props.modelValue)
@@ -146,9 +116,8 @@ function open(): boolean {
   emit('beforeOpen', { stop: () => shouldStop = true })
   if (shouldStop)
     return false
-  moveToLastOpenedModals(modalInstance)
-  moveToLastOpenedModalOverlays(modalInstance)
-  refreshZIndex(index.value)
+  arrayMoveItemToLast(openedModals, instance)
+  arrayMoveItemToLast(openedModalOverlays, instance)
   openLastOverlay()
   enterTransition()
   return true
@@ -159,7 +128,7 @@ function close(): boolean {
   emit('beforeClose', { stop: () => shouldStop = true })
   if (shouldStop)
     return false
-  deleteFromOpenedModalOverlays(getModalInstance())
+  arrayRemoveItem(openedModalOverlays, instance)
   openLastOverlay()
   blur()
   leaveTransition()
@@ -168,12 +137,49 @@ function close(): boolean {
 
 onBeforeUnmount(() => {
   enableBodyScroll()
-  deleteFromModals(modalInstance)
-  deleteFromOpenedModals(modalInstance)
-  deleteFromOpenedModalOverlays(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) => {
+    const modalExposed = getModalExposed(modal)
+    return modalExposed?.value.overlayBehavior.value === 'auto' && !modalExposed?.value.hideOverlay?.value
+  })
+  // Only keep the last overlay open
+  openedModalsOverlaysAuto.forEach((modal, index) => {
+    const modalExposed = getModalExposed(modal)
+    if (!modalExposed?.value)
+      return
+    modalExposed.value.overlayVisible.value = index === openedModalsOverlaysAuto.length - 1
+  })
+}
+
+const modalId = toRef(props, 'modalId')
+const hideOverlay = toRef(props, 'hideOverlay')
+const overlayBehavior = toRef(props, 'overlayBehavior')
+const modalExposed = computed<ModalExposed>(() => ({
+  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
+    })
+  },
+}))
+
+defineExpose({
+  modalExposed,
+})
 </script>
 
 <template>
@@ -193,7 +199,7 @@ onBeforeUnmount(() => {
       @mouseup.self="() => onMouseupRoot()"
       @mousedown.self="e => onMousedown(e)"
     >
-      <Transition v-if="!hideOverlay" v-bind="overlayTransition" :appear="true" 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"
@@ -204,7 +210,7 @@ onBeforeUnmount(() => {
           aria-hidden="true"
         />
       </Transition>
-      <Transition v-bind="contentTransition" :appear="true" 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/components/VueFinalModal/VueFinalModalProps.ts

@@ -72,6 +72,14 @@ export const vueFinalModalProps = {
     type: Boolean as PropType<boolean>,
     default: undefined,
   },
+  /**
+   * @description Customize the overlay behavior.
+   */
+  overlayBehavior: {
+    type: String as PropType<'auto' | 'persist'>,
+    default: 'auto',
+    validator: (prop: any) => ['auto', 'persist'].includes(prop),
+  },
   /**
    * @description Customize the overlay transition.
    * @default `undefined`

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

@@ -58,14 +58,14 @@ export function useTransition(
 
   const contentTransition = computed<TransitionProps>(() => {
     if (typeof props.contentTransition === 'string')
-      return { name: props.contentTransition }
-    return { ...props.contentTransition }
+      return { name: props.contentTransition, appear: true }
+    return { appear: true, ...props.contentTransition }
   })
 
   const overlayTransition = computed<TransitionProps>(() => {
     if (typeof props.overlayTransition === 'string')
-      return { name: props.overlayTransition }
-    return { ...props.overlayTransition }
+      return { name: props.overlayTransition, appear: true }
+    return { appear: true, ...props.overlayTransition }
   })
 
   const isReadyToBeDestroyed = computed(() =>

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/injectionSymbols.ts

@@ -1,5 +1,4 @@
 import type { InjectionKey } from 'vue'
-import type { InternalVfm, Vfm } from './Modal'
+import type { Vfm } from './Modal'
 
 export const vfmSymbol = Symbol(__DEV__ ? 'vfm' : '') as InjectionKey<Vfm>
-export const internalVfmSymbol = Symbol(__DEV__ ? 'internalVfm' : '') as InjectionKey<InternalVfm>