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 <hunterliu1003@gmail.com>

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')
+    })
+  })
+})