fix: make sure the overlay closed

Author: hunterliu1003

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

@@ -51,6 +51,7 @@ export type Vfm = {
   install(app: App): void
   modals: ComputedRef<Modal>[]
   openedModals: ComputedRef<Modal>[]
+  openedModalOverlays: ComputedRef<Modal>[]
   dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[]
   modalsContainers: Ref<symbol[]>
   get: (modalId: ModalId) => undefined | ComputedRef<Modal>
@@ -64,6 +65,8 @@ export type InternalVfm = {
   deleteFromModals: (modal: ComputedRef<Modal>) => void
   moveToLastOpenedModals: (modal: ComputedRef<Modal>) => void
   deleteFromOpenedModals: (modal: ComputedRef<Modal>) => void
+  moveToLastOpenedModalOverlays: (modal: ComputedRef<Modal>) => void
+  deleteFromOpenedModalOverlays: (modal: ComputedRef<Modal>) => void
   openLastOverlay: () => Promise<void>
   resolvedClosed: (index: number) => void
   resolvedOpened: (index: number) => void

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

@@ -35,14 +35,18 @@ const { modals, openedModals } = inject(vfmSymbol, {
 } as any as Vfm)
 
 const {
-  moveToLastOpenedModals,
   openLastOverlay,
+  moveToLastOpenedModals,
   deleteFromOpenedModals,
+  moveToLastOpenedModalOverlays,
+  deleteFromOpenedModalOverlays,
   deleteFromModals,
 } = inject(internalVfmSymbol, {
-  moveToLastOpenedModals: noop,
   openLastOverlay: noop,
+  moveToLastOpenedModals: noop,
   deleteFromOpenedModals: noop,
+  moveToLastOpenedModalOverlays: noop,
+  deleteFromOpenedModalOverlays: noop,
   deleteFromModals: noop,
 } as any as InternalVfm)
 
@@ -142,6 +146,7 @@ watch(modelValueLocal, (value) => {
 async function open() {
   emitEvent('beforeOpen')
   moveToLastOpenedModals(modalInstance)
+  moveToLastOpenedModalOverlays(modalInstance)
   refreshZIndex(index.value)
   openLastOverlay()
   enterTransition()
@@ -150,6 +155,7 @@ async function open() {
 function close() {
   emitEvent('beforeClose')
   enableBodyScroll()
+  deleteFromOpenedModalOverlays(modalInstance)
   focusLast()
   openLastOverlay()
   leaveTransition()
@@ -159,6 +165,7 @@ onBeforeUnmount(() => {
   enableBodyScroll()
   deleteFromModals(modalInstance)
   deleteFromOpenedModals(modalInstance)
+  deleteFromOpenedModalOverlays(modalInstance)
   focusLast()
   openLastOverlay()
 })

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

@@ -6,6 +6,7 @@ import type { InternalVfm, Modal, ModalId, UseModalOptions, UseModalOptionsPriva
 export function createVfm() {
   const modals: ComputedRef<Modal>[] = shallowReactive([])
   const openedModals: ComputedRef<Modal>[] = shallowReactive([])
+  const openedModalOverlays: ComputedRef<Modal>[] = shallowReactive([])
   const dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[] = shallowReactive([])
   const modalsContainers = ref<symbol[]>([])
 
@@ -19,6 +20,7 @@ export function createVfm() {
     },
     modals,
     openedModals,
+    openedModalOverlays,
     dynamicModals,
     modalsContainers,
     get(modalId: ModalId) {
@@ -43,7 +45,7 @@ export function createVfm() {
 }
 
 function createInternalVfm(vfm: Vfm) {
-  const { modals, openedModals, dynamicModals } = vfm
+  const { modals, openedModals, openedModalOverlays, dynamicModals } = vfm
 
   const internalVfm: InternalVfm = {
     deleteFromModals(modal: ComputedRef<Modal>) {
@@ -60,13 +62,22 @@ function createInternalVfm(vfm: Vfm) {
       if (index !== -1)
         openedModals.splice(index, 1)
     },
+    moveToLastOpenedModalOverlays(modal: ComputedRef<Modal>) {
+      internalVfm.deleteFromOpenedModalOverlays(modal)
+      openedModalOverlays.push(modal)
+    },
+    deleteFromOpenedModalOverlays(modal: ComputedRef<Modal>) {
+      const index = openedModalOverlays.findIndex(_modal => _modal.value === modal.value)
+      if (index !== -1)
+        openedModalOverlays.splice(index, 1)
+    },
     async openLastOverlay() {
       await nextTick()
       // Close all overlay first
-      openedModals.forEach(modal => modal.value.overlayVisible.value = false)
+      openedModalOverlays.forEach(modal => modal.value.overlayVisible.value = false)
       // Open the last overlay if it has overlay
-      if (openedModals.length > 0) {
-        const modal = openedModals[openedModals.length - 1]
+      if (openedModalOverlays.length > 0) {
+        const modal = openedModalOverlays[openedModalOverlays.length - 1]
         !modal.value.hideOverlay?.value && (modal.value.overlayVisible.value = true)
       }
     },