diff --git a/.eslintignore b/.eslintignore index 8bfe6ccd..8d69b5a3 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,4 @@ dist node_modules -coverage .cache deprecated \ No newline at end of file diff --git a/.github/workflows/coveralls.yml b/.github/workflows/coveralls.yml deleted file mode 100644 index 8ee81c35..00000000 --- a/.github/workflows/coveralls.yml +++ /dev/null @@ -1,33 +0,0 @@ -on: ["push", "pull_request"] - -name: Test Coveralls - -jobs: - - build: - name: Build - runs-on: ubuntu-latest - steps: - - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: '16' - - name: install pnpm - run: | - npm install pnpm@latest -g - pnpm --version - - name: pnpm install --shamefully-hoist --ignore-scripts - run: pnpm install --shamefully-hoist --ignore-scripts - - name: pnpm coverage:vfm - run: | - pnpm coverage:vfm - - name: "Check file existence" - uses: andstor/file-existence-action@v2 - with: - files: "./packages/vue-final-modal/coverage/lcov.info" - - name: Coveralls - uses: coverallsapp/github-action@master - with: - github-token: ${{ secrets.GITHUB_TOKEN }} - path-to-lcov: ./packages/vue-final-modal/coverage/lcov.info \ No newline at end of file diff --git a/package.json b/package.json index deb1028e..e3236bd9 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue index 490fe029..3c8f4b53 100644 --- a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue +++ b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue @@ -49,6 +49,7 @@ const { const vfmRootEl = ref() 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(() => ({ }, })) -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,6 +142,7 @@ watch(modelValueLocal, (value) => { async function open() { emitEvent('beforeOpen') moveToLastOpenedModals(modalInstance) + refreshZIndex(index.value) openLastOverlay() enterTransition() } @@ -137,7 +150,6 @@ async function open() { function close() { emitEvent('beforeClose') enableBodyScroll() - deleteFromOpenedModals(modalInstance) focusLast() openLastOverlay() leaveTransition() diff --git a/packages/vue-final-modal/src/components/CoreModal/useZIndex.ts b/packages/vue-final-modal/src/components/CoreModal/useZIndex.ts index 1047909a..2558755d 100644 --- a/packages/vue-final-modal/src/components/CoreModal/useZIndex.ts +++ b/packages/vue-final-modal/src/components/CoreModal/useZIndex.ts @@ -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['$props'], - options: { - openedModals: ComputedRef[] - modalInstance: ComputedRef - visible: Ref - }, ) { - const { openedModals, modalInstance, visible } = options - const zIndex = ref() - 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, } }