From ec84d1bf3119c531982750dfd8d00e44c46b4400 Mon Sep 17 00:00:00 2001 From: Hunter Date: Tue, 28 Feb 2023 02:06:31 +0800 Subject: [PATCH 1/6] fix: fixed: zIndex calculation logic --- .../src/components/CoreModal/CoreModal.vue | 20 ++++++++++---- .../src/components/CoreModal/useZIndex.ts | 26 ++++++------------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue index 490fe029..3ac28ee8 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,7 @@ const { blur() }, onLeave() { + resetZIndex() emitEvent('closed') resolveToggle('closed') }, @@ -114,7 +116,14 @@ const modalInstance = computed(() => ({ }, })) -const { zIndex } = useZIndex(props, { openedModals, modalInstance, visible }) +function getIndex() { + return openedModals.indexOf(modalInstance) +} + +watch(() => props.zIndexFn, () => { + if (visible.value) + refreshZIndex(getIndex()) +}) onMounted(() => { modals.push(modalInstance) @@ -130,6 +139,7 @@ watch(modelValueLocal, (value) => { async function open() { emitEvent('beforeOpen') moveToLastOpenedModals(modalInstance) + refreshZIndex(getIndex()) openLastOverlay() enterTransition() } @@ -241,7 +251,7 @@ onBeforeUnmount(() => { .vfm-fade-enter-active, .vfm-fade-leave-active { - transition: opacity .3s; + transition: opacity 3.3s; } .vfm-fade-enter-from, .vfm-fade-leave-to { @@ -250,14 +260,14 @@ onBeforeUnmount(() => { .vfm-bounce-back { transition-property: transform; - transition-duration: .3s; + transition-duration: 3.3s; } .vfm-slide-up-enter-active, .vfm-slide-up-leave-active, .vfm-slide-down-enter-active, .vfm-slide-down-leave-active { - transition: transform .3s ease; + transition: transform 3.3s ease; } .vfm-slide-down-enter-from, .vfm-slide-down-leave-to { @@ -272,7 +282,7 @@ onBeforeUnmount(() => { .vfm-slide-right-leave-active, .vfm-slide-left-enter-active, .vfm-slide-left-leave-active { - transition: transform .3s ease; + transition: transform 3.3s ease; } .vfm-slide-right-enter-from, .vfm-slide-right-leave-to { 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, } } From 1dec93f7eb2e2e58e6d4b683220c21b807dce27a Mon Sep 17 00:00:00 2001 From: Hunter Date: Tue, 28 Feb 2023 02:10:00 +0800 Subject: [PATCH 2/6] chore: reset transition durations 0.3s --- .../src/components/CoreModal/CoreModal.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue index 3ac28ee8..28a8e57b 100644 --- a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue +++ b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue @@ -251,7 +251,7 @@ onBeforeUnmount(() => { .vfm-fade-enter-active, .vfm-fade-leave-active { - transition: opacity 3.3s; + transition: opacity .3s; } .vfm-fade-enter-from, .vfm-fade-leave-to { @@ -260,14 +260,14 @@ onBeforeUnmount(() => { .vfm-bounce-back { transition-property: transform; - transition-duration: 3.3s; + transition-duration: .3s; } .vfm-slide-up-enter-active, .vfm-slide-up-leave-active, .vfm-slide-down-enter-active, .vfm-slide-down-leave-active { - transition: transform 3.3s ease; + transition: transform .3s ease; } .vfm-slide-down-enter-from, .vfm-slide-down-leave-to { @@ -282,7 +282,7 @@ onBeforeUnmount(() => { .vfm-slide-right-leave-active, .vfm-slide-left-enter-active, .vfm-slide-left-leave-active { - transition: transform 3.3s ease; + transition: transform .3s ease; } .vfm-slide-right-enter-from, .vfm-slide-right-leave-to { From dbe6e727b67abb23008f8b7a480583f306fa9b6c Mon Sep 17 00:00:00 2001 From: Hunter Date: Tue, 28 Feb 2023 02:32:05 +0800 Subject: [PATCH 3/6] fix: deleteFromOpenedModals(getModalInstance()) should inside of onLeave --- .../src/components/CoreModal/CoreModal.vue | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue index 28a8e57b..8f6f06ea 100644 --- a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue +++ b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue @@ -84,6 +84,7 @@ const { blur() }, onLeave() { + deleteFromOpenedModals(getModalInstance()) resetZIndex() emitEvent('closed') resolveToggle('closed') @@ -116,11 +117,17 @@ const modalInstance = computed(() => ({ }, })) +function getModalInstance() { + return modalInstance +} + +const index = computed(() => openedModals.indexOf(modalInstance)) + function getIndex() { - return openedModals.indexOf(modalInstance) + return index.value } -watch(() => props.zIndexFn, () => { +watch(() => [props.zIndexFn, index.value], () => { if (visible.value) refreshZIndex(getIndex()) }) @@ -147,7 +154,6 @@ async function open() { function close() { emitEvent('beforeClose') enableBodyScroll() - deleteFromOpenedModals(modalInstance) focusLast() openLastOverlay() leaveTransition() From 6b62aedda04da426991241a2c2067982fe7ef4bf Mon Sep 17 00:00:00 2001 From: Hunter Liu Date: Tue, 28 Feb 2023 02:53:34 +0800 Subject: [PATCH 4/6] Update packages/vue-final-modal/src/components/CoreModal/CoreModal.vue Co-authored-by: Alex Liu --- packages/vue-final-modal/src/components/CoreModal/CoreModal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue index 8f6f06ea..5e918776 100644 --- a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue +++ b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue @@ -146,7 +146,7 @@ watch(modelValueLocal, (value) => { async function open() { emitEvent('beforeOpen') moveToLastOpenedModals(modalInstance) - refreshZIndex(getIndex()) + refreshZIndex(index.value) openLastOverlay() enterTransition() } From 824164663a55a452e2a62f7291dd67e264a6a266 Mon Sep 17 00:00:00 2001 From: Hunter Liu Date: Tue, 28 Feb 2023 02:54:41 +0800 Subject: [PATCH 5/6] Update packages/vue-final-modal/src/components/CoreModal/CoreModal.vue Co-authored-by: Alex Liu --- .../vue-final-modal/src/components/CoreModal/CoreModal.vue | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue index 5e918776..3c8f4b53 100644 --- a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue +++ b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue @@ -123,13 +123,9 @@ function getModalInstance() { const index = computed(() => openedModals.indexOf(modalInstance)) -function getIndex() { - return index.value -} - watch(() => [props.zIndexFn, index.value], () => { if (visible.value) - refreshZIndex(getIndex()) + refreshZIndex(index.value) }) onMounted(() => { From 733b820da6491ad333a7837c19821839f5063f88 Mon Sep 17 00:00:00 2001 From: Hunter Date: Tue, 28 Feb 2023 03:00:26 +0800 Subject: [PATCH 6/6] chore: remove coverall --- .eslintignore | 1 - .github/workflows/coveralls.yml | 33 --------------------------------- package.json | 1 - 3 files changed, 35 deletions(-) delete mode 100644 .github/workflows/coveralls.yml 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",