From 03e6aa50de21277528ca890e7f16b0cb5762c6b8 Mon Sep 17 00:00:00 2001 From: "X.Q. Chen" <31237954+brenner8023@users.noreply.github.com> Date: Wed, 27 Jul 2022 09:44:14 +0800 Subject: [PATCH] feat(cdk:utils): add zIndex manager (#1015) fix #998 --- packages/cdk/utils/__tests__/zIndex.spec.ts | 72 +++++++++++++++++++ packages/cdk/utils/index.ts | 1 + packages/cdk/utils/src/zIndex.ts | 43 +++++++++++ .../_private/overlay/src/Overlay.tsx | 15 ++-- .../components/config/src/defaultConfig.ts | 1 + packages/components/config/src/types.ts | 3 +- packages/components/drawer/src/Drawer.tsx | 9 +-- .../components/drawer/src/DrawerWrapper.tsx | 8 +-- packages/components/drawer/src/token.ts | 1 + packages/components/message/docs/Index.zh.md | 4 +- .../style/themes/default.variable.less | 2 +- packages/components/modal/src/Modal.tsx | 18 ++++- .../components/modal/src/ModalWrapper.tsx | 8 +-- packages/components/modal/src/token.ts | 1 + .../components/notification/docs/Index.zh.md | 4 +- .../style/themes/default.variable.less | 2 +- .../__snapshots__/popover.spec.ts.snap | 2 +- .../popover/__tests__/popover.spec.ts | 1 + .../components/style/variable/zindex.less | 4 +- 19 files changed, 169 insertions(+), 30 deletions(-) create mode 100644 packages/cdk/utils/__tests__/zIndex.spec.ts create mode 100644 packages/cdk/utils/src/zIndex.ts diff --git a/packages/cdk/utils/__tests__/zIndex.spec.ts b/packages/cdk/utils/__tests__/zIndex.spec.ts new file mode 100644 index 000000000..73d3008ac --- /dev/null +++ b/packages/cdk/utils/__tests__/zIndex.spec.ts @@ -0,0 +1,72 @@ +import { mount } from '@vue/test-utils' +import { computed, defineComponent, ref, toRef } from 'vue' + +import { useZIndex } from '../src/zIndex' + +describe('zIndex.ts', () => { + const TestComp = defineComponent({ + props: { + visible: { type: Boolean, required: true }, + zIndex: { type: Number, default: undefined }, + }, + setup(props) { + const visible = toRef(props, 'visible') + const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), ref(3000), visible) + const style = computed(() => ({ zIndex: currentZIndex.value })) + + return { + style, + } + }, + template: ` +
+ `, + }) + + test('custdom zIndex work', async () => { + const wrapper = mount(TestComp, { + props: { + visible: false, + zIndex: 2022, + }, + }) + + expect(wrapper.find('[utid="test-el"]').attributes('style')).toContain('z-index: 2022') + + await wrapper.setProps({ visible: true }) + expect(wrapper.find('[utid="test-el"]').attributes('style')).toContain('z-index: 2022') + }) + + test('increment zIndex work', async () => { + const wrapper = mount(TestComp, { + props: { + visible: false, + }, + }) + + expect(wrapper.find('[utid="test-el"]').attributes('style')).toContain('z-index: 3000') + + await wrapper.setProps({ visible: true }) + expect(wrapper.find('[utid="test-el"]').attributes('style')).toContain('z-index: 3000') + + const wrapper2 = mount(TestComp, { + props: { + visible: false, + }, + }) + await wrapper2.setProps({ visible: true }) + expect(wrapper2.find('[utid="test-el"]').attributes('style')).toContain('z-index: 3001') + + const wrapper3 = mount(TestComp, { + props: { + visible: true, + }, + }) + expect(wrapper3.find('[utid="test-el"]').attributes('style')).toContain('z-index: 3002') + + expect(wrapper.find('[utid="test-el"]').attributes('style')).toContain('z-index: 3000') + await wrapper.setProps({ visible: false }) + await wrapper.setProps({ visible: true }) + expect(wrapper.find('[utid="test-el"]').attributes('style')).toContain('z-index: 3003') + }) +}) diff --git a/packages/cdk/utils/index.ts b/packages/cdk/utils/index.ts index 4b31faa51..1e02b401b 100644 --- a/packages/cdk/utils/index.ts +++ b/packages/cdk/utils/index.ts @@ -17,3 +17,4 @@ export * from './src/typeof' export * from './src/uniqueId' export * from './src/useEventListener' export * from './src/vNode' +export * from './src/zIndex' diff --git a/packages/cdk/utils/src/zIndex.ts b/packages/cdk/utils/src/zIndex.ts new file mode 100644 index 000000000..2e2c12c42 --- /dev/null +++ b/packages/cdk/utils/src/zIndex.ts @@ -0,0 +1,43 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import { type ComputedRef, type Ref, computed, ref, watch } from 'vue' + +import { isNil } from 'lodash-es' + +const zIndexCount = ref(0) + +type UseZIndex = ( + controlZIndex: Ref