fix: fixed zIndex calculation logic (#335)

* fix: fixed: zIndex calculation logic

* chore: reset transition durations 0.3s

* fix: deleteFromOpenedModals(getModalInstance()) should inside of onLeave

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

Co-authored-by: Alex Liu <[email protected]>

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

Co-authored-by: Alex Liu <[email protected]>

* chore: remove coverall

---------

Co-authored-by: Alex Liu <[email protected]>

Author: hunterliu1003

.eslintignore

@@ -1,5 +1,4 @@
 dist
 node_modules
-coverage
 .cache
 deprecated

.github/workflows/coveralls.yml

@@ -11,7 +11,6 @@
     "dev:vfm": "pnpm --filter vue-final-modal dev",
     "build:vfm": "pnpm --filter vue-final-modal build",
     "test:vfm": "pnpm --filter vue-final-modal cypress:run",
-    "coverage:vfm": "pnpm --filter vue-final-modal coverage",
     "release:vfm": "pnpm --filter vue-final-modal release",
     "lint": "eslint . --ext=.ts,.vue --fix",
     "typecheck": "pnpm --parallel typecheck",

package.json

@@ -49,6 +49,7 @@ const {
 const vfmRootEl = ref<HTMLDivElement>()
 
 const { focus, focusLast, blur } = useFocusTrap(props, { focusEl: vfmRootEl, openedModals })
+const { zIndex, refreshZIndex, resetZIndex } = useZIndex(props)
 const { enableBodyScroll, disableBodyScroll } = useLockScroll(props, { lockScrollEl: vfmRootEl })
 const { modelValueLocal } = useModelValue(props, emit)
 const { emitEvent } = useEvent(emit)
@@ -83,6 +84,8 @@ const {
     blur()
   },
   onLeave() {
+    deleteFromOpenedModals(getModalInstance())
+    resetZIndex()
     emitEvent('closed')
     resolveToggle('closed')
   },
@@ -114,7 +117,16 @@ const modalInstance = computed<Modal>(() => ({
   },
 }))
 
-const { zIndex } = useZIndex(props, { openedModals, modalInstance, visible })
+function getModalInstance() {
+  return modalInstance
+}
+
+const index = computed(() => openedModals.indexOf(modalInstance))
+
+watch(() => [props.zIndexFn, index.value], () => {
+  if (visible.value)
+    refreshZIndex(index.value)
+})
 
 onMounted(() => {
   modals.push(modalInstance)
@@ -130,14 +142,14 @@ watch(modelValueLocal, (value) => {
 async function open() {
   emitEvent('beforeOpen')
   moveToLastOpenedModals(modalInstance)
+  refreshZIndex(index.value)
   openLastOverlay()
   enterTransition()
 }
 
 function close() {
   emitEvent('beforeClose')
   enableBodyScroll()
-  deleteFromOpenedModals(modalInstance)
   focusLast()
   openLastOverlay()
   leaveTransition()

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

@@ -1,32 +1,22 @@
-import type { ComputedRef, Ref } from 'vue'
-import { computed, ref, watch } from 'vue'
+import { ref } from 'vue'
 import type CoreModal from './CoreModal.vue'
-import type { Modal } from '~/Modal'
 
 export function useZIndex(
   props: InstanceType<typeof CoreModal>['$props'],
-  options: {
-    openedModals: ComputedRef<Modal>[]
-    modalInstance: ComputedRef<Modal>
-    visible: Ref<boolean>
-  },
 ) {
-  const { openedModals, modalInstance, visible } = options
-
   const zIndex = ref<undefined | number>()
 
-  const index = computed(() => openedModals.indexOf(modalInstance))
-
-  function refreshZIndex() {
-    zIndex.value = props.zIndexFn?.({ index: index.value })
+  function refreshZIndex(index: number) {
+    zIndex.value = props.zIndexFn?.({ index: index <= -1 ? 0 : index })
   }
 
-  watch(() => [props.zIndexFn, index.value], () => {
-    if (visible.value)
-      refreshZIndex()
-  })
+  function resetZIndex() {
+    zIndex.value = undefined
+  }
 
   return {
     zIndex,
+    refreshZIndex,
+    resetZIndex,
   }
 }