From bfd4d85d36ac7cf8291124aa0773c138808e3a9a Mon Sep 17 00:00:00 2001 From: "X.Q. Chen" <31237954+brenner8023@users.noreply.github.com> Date: Sun, 24 Jul 2022 10:22:51 +0800 Subject: [PATCH] feat(cdk:utils): add zIndex manager --- packages/cdk/utils/__tests__/zIndex.spec.ts | 72 +++++++++++++++++++ packages/cdk/utils/index.ts | 1 + packages/cdk/utils/src/zIndex.ts | 36 ++++++++++ .../_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 | 21 ++++-- packages/components/drawer/src/token.ts | 1 + .../__snapshots__/message.spec.ts.snap | 2 +- packages/components/message/src/Message.tsx | 15 +++- packages/components/modal/src/Modal.tsx | 18 ++++- .../components/modal/src/ModalWrapper.tsx | 8 +-- packages/components/modal/src/token.ts | 1 + .../__snapshots__/notification.spec.ts.snap | 2 +- .../notification/src/Notification.tsx | 10 +-- .../__snapshots__/popover.spec.ts.snap | 2 +- .../popover/__tests__/popover.spec.ts | 1 + 18 files changed, 185 insertions(+), 33 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..329dc8fdd --- /dev/null +++ b/packages/cdk/utils/__tests__/zIndex.spec.ts @@ -0,0 +1,72 @@ +import { mount } from '@vue/test-utils' +import { computed, defineComponent, 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(visible, toRef(props, 'zIndex'), 3000) + 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..ec75e9868 --- /dev/null +++ b/packages/cdk/utils/src/zIndex.ts @@ -0,0 +1,36 @@ +/** + * @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' + +const zIndexCount = ref(0) +const getZIndex = (commonZIndex: number) => zIndexCount.value + (commonZIndex ?? 1000) + +type UseZIndex = ( + visible: Ref