feat: update z-index after state changes (#334)

* feat: update `z-index` after state changes

* fix: only refresh zIndex if the modal is visible

* fix: watch zIndexFn and index.value

* fix: refreshZIndex after moveToLastOpenedModals

* test: add useZIndex test cases and simplify tests

* test: add test cases for focusTrap

* test: add events test cases

* test: add test video

* fix: do not need to execute refreshZIndex in CoreModal

* refactor: tests

---------

Co-authored-by: Hunter <[email protected]>

Author: Mini-ghost

packages/vue-final-modal/cypress/components/App.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ModalsContainer } from '~/index'
+</script>
+
+<template>
+  <div>
+    <div v-for="i in 1000" :key="i">
+      id: {{ i }}
+    </div>
+    <slot />
+
+    <ModalsContainer />
+  </div>
+</template>

packages/vue-final-modal/cypress/components/Form.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  (e: 'submit', payload: {
+    account: string
+    password: string
+  }): void
+}>()
+
+const account = ref('')
+const password = ref('')
+</script>
+
+<template>
+  <form @submit.prevent="() => emit('submit', { account, password })">
+    <label>Account:<input v-model="account" class="form-account" type="text"></label>
+    <label>Password:<input v-model="password" class="form-password" type="password"></label>
+
+    <button class="form-submit" type="submit">
+      Submit
+    </button>
+  </form>
+</template>

packages/vue-final-modal/cypress/components/TestUseModal.spec.ts

@@ -0,0 +1,60 @@
+import App from './App.vue'
+import Form from './Form.vue'
+import { VueFinalModal, createVfm, useModal } from '~/index'
+
+describe('Test focusTrap', () => {
+  it('Props: focusTrap', () => {
+    const vfm = createVfm()
+
+    const firstModal = useModal({
+      context: vfm,
+      component: VueFinalModal,
+      attrs: { contentClass: 'first-modal-content' },
+      slots: {
+        default: Form,
+      },
+    })
+
+    const secondModal = useModal({
+      context: vfm,
+      component: VueFinalModal,
+      attrs: { contentClass: 'second-modal-content' },
+      slots: {
+        default: '<p>Hello world!</p>',
+      },
+    })
+
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
+    })
+      .then(async () => {
+        await firstModal.open()
+        cy.focused().as('firstModalFocus')
+        cy.get('@firstModalFocus').should('have.class', 'first-modal-content')
+      })
+      .then(async () => {
+        cy.get('.form-submit').focus()
+        cy.focused().as('formSubmitFocus')
+        cy.get('@formSubmitFocus').should('have.class', 'form-submit')
+      })
+      .then(async () => {
+        await secondModal.open()
+        cy.focused().as('secondModalFocus')
+        cy.get('@secondModalFocus').should('have.class', 'second-modal-content')
+      })
+      .then(async () => {
+        await secondModal.close()
+        cy.focused().as('formSubmitFocus')
+        cy.get('@formSubmitFocus').should('have.class', 'form-submit')
+      })
+      .then(async () => {
+        await firstModal.close()
+        await firstModal.open()
+        cy.focused().as('firstModalFocus')
+        cy.get('@firstModalFocus').should('have.class', 'first-modal-content')
+      })
+  })
+})

packages/vue-final-modal/cypress/components/TestUseModal.vue

@@ -0,0 +1,83 @@
+import App from './App.vue'
+import Form from './Form.vue'
+import { createVfm, useModal } from '~/index'
+
+describe('Test useModal()', () => {
+  it('Should be closed by default', () => {
+    const vfm = createVfm()
+    const modal = useModal({
+      context: vfm,
+      slots: { default: 'Hello World!' },
+    })
+
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
+    }).as('app')
+
+    cy.contains('Hello World!').should('not.exist')
+    cy.get('@app').then(() => modal.open())
+    cy.contains('Hello World!').should('exist')
+  })
+
+  it('Should be opened by given defaultModelValue: true', () => {
+    const vfm = createVfm()
+    useModal({
+      context: vfm,
+      defaultModelValue: true,
+      slots: {
+        default: 'Hello World!',
+      },
+    })
+
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
+    })
+
+    cy.contains('Hello World!')
+  })
+
+  it('Events', () => {
+    const vfm = createVfm()
+
+    const onBeforeOpen = cy.spy().as('onBeforeOpen')
+    const onOpened = cy.spy().as('onOpened')
+    const onBeforeClose = cy.spy().as('onBeforeClose')
+    const onClosed = cy.spy().as('onClosed')
+
+    const modal = useModal({
+      context: vfm,
+      attrs: {
+        onBeforeOpen,
+        onOpened,
+        onBeforeClose,
+        onClosed,
+      },
+      slots: { default: Form },
+    })
+
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
+    }).as('app')
+
+    cy.get('@onBeforeOpen').should('have.callCount', 0)
+    cy.get('@onOpened').should('have.callCount', 0)
+    cy.get('@app').then(() => modal.open())
+    cy.get('@onBeforeOpen').should('have.callCount', 1)
+    cy.get('@onOpened').should('have.callCount', 1)
+
+    cy.get('@onBeforeClose').should('have.callCount', 0)
+    cy.get('@onClosed').should('have.callCount', 0)
+    cy.get('@app').then(() => modal.close())
+    cy.get('@onBeforeClose').should('have.callCount', 1)
+    cy.get('@onClosed').should('have.callCount', 1)
+  })
+})

packages/vue-final-modal/cypress/components/focusTrap.spec.ts

@@ -0,0 +1,69 @@
+import App from './App.vue'
+import { VueFinalModal, createVfm, useModal } from '~/index'
+
+describe('Test useZIndex()', () => {
+  it('Props: zIndexFn()', () => {
+    const vfm = createVfm()
+    const firstModal = useModal({
+      context: vfm,
+      component: VueFinalModal,
+      attrs: { class: 'first-modal' },
+    })
+
+    const secondModal = useModal({
+      context: vfm,
+      component: VueFinalModal,
+      attrs: { class: 'second-modal' },
+    })
+
+    const thirdModal = useModal({
+      context: vfm,
+      component: VueFinalModal,
+      attrs: { class: 'third-modal' },
+    })
+
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
+    }).as('app')
+    cy.get('@app').then(() => {
+      firstModal.open()
+    })
+    cy.get('.first-modal').should(($el) => {
+      expect($el).to.have.css('zIndex', '1000')
+    })
+    cy.get('@app').then(() => {
+      secondModal.open()
+    })
+    cy.get('.second-modal').should(($el) => {
+      expect($el).to.have.css('zIndex', '1002')
+    })
+    cy.get('@app').then(() => {
+      thirdModal.open()
+    })
+    cy.get('.third-modal').should(($el) => {
+      expect($el).to.have.css('zIndex', '1004')
+    })
+    cy.get('@app').then(() => {
+      thirdModal.patchOptions({
+        attrs: {
+          zIndexFn: ({ index }) => 1234 + 2 * index,
+        },
+      })
+    })
+    cy.get('.third-modal').should(($el) => {
+      expect($el).to.have.css('zIndex', '1238')
+    })
+    cy.get('@app').then(() => {
+      firstModal.close()
+    })
+    cy.get('.second-modal').should(($el) => {
+      expect($el).to.have.css('zIndex', '1000')
+    })
+    cy.get('.third-modal').should(($el) => {
+      expect($el).to.have.css('zIndex', '1236')
+    })
+  })
+})

packages/vue-final-modal/cypress/components/useModal.spec.ts

@@ -47,7 +47,7 @@ const {
 } as any as InternalVfm)
 
 const vfmRootEl = ref<HTMLDivElement>()
-const { zIndex, refreshZIndex } = useZIndex(props, { openedModals })
+
 const { focus, focusLast, blur } = useFocusTrap(props, { focusEl: vfmRootEl, openedModals })
 const { enableBodyScroll, disableBodyScroll } = useLockScroll(props, { lockScrollEl: vfmRootEl })
 const { modelValueLocal } = useModelValue(props, emit)
@@ -114,6 +114,8 @@ const modalInstance = computed<Modal>(() => ({
   },
 }))
 
+const { zIndex } = useZIndex(props, { openedModals, modalInstance, visible })
+
 onMounted(() => {
   modals.push(modalInstance)
 })
@@ -127,7 +129,6 @@ watch(modelValueLocal, (value) => {
 
 async function open() {
   emitEvent('beforeOpen')
-  refreshZIndex()
   moveToLastOpenedModals(modalInstance)
   openLastOverlay()
   enterTransition()

packages/vue-final-modal/cypress/components/useZIndex.spec.ts

@@ -1,21 +1,32 @@
-import type { ComputedRef } from 'vue'
-import { ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+import { computed, ref, watch } 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>[] },
+  options: {
+    openedModals: ComputedRef<Modal>[]
+    modalInstance: ComputedRef<Modal>
+    visible: Ref<boolean>
+  },
 ) {
-  const { openedModals } = options
+  const { openedModals, modalInstance, visible } = options
+
   const zIndex = ref<undefined | number>()
 
+  const index = computed(() => openedModals.indexOf(modalInstance))
+
   function refreshZIndex() {
-    zIndex.value = props.zIndexFn?.({ index: openedModals.length })
+    zIndex.value = props.zIndexFn?.({ index: index.value })
   }
 
+  watch(() => [props.zIndexFn, index.value], () => {
+    if (visible.value)
+      refreshZIndex()
+  })
+
   return {
     zIndex,
-    refreshZIndex,
   }
 }

packages/vue-final-modal/cypress/videos/TestUseModal.spec.ts.mp4

@@ -58,7 +58,7 @@ onBeforeUnmount(() => {
       :key="modal.id"
       v-bind="modal.attrs"
       v-model="modal.modelValue"
-      @closed="withSyncOpenDynamicModals(() => _vfm.resolvedClosed?.(index))"
+      @closed="() => withSyncOpenDynamicModals(() => _vfm.resolvedClosed?.(index))"
       @opened="() => _vfm.resolvedOpened?.(index)"
     >
       <template v-for="(slot, key) in modal.slots" #[key] :key="key">