From fc6807cb68eed99b1d59ae9734b29386e087e3cf Mon Sep 17 00:00:00 2001 From: "X.Q. Chen" <31237954+brenner8023@users.noreply.github.com> Date: Sun, 24 Jul 2022 00:38:59 +0800 Subject: [PATCH] feat(cdk:utils): add zIndex manager --- packages/cdk/utils/__tests__/zIndex.spec.ts | 108 ++++++++++++++++++ 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, 221 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..ba31a8067 --- /dev/null +++ b/packages/cdk/utils/__tests__/zIndex.spec.ts @@ -0,0 +1,108 @@ +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(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') + }) + + test('should work when element does not exist', async () => { + const TestComp = { + props: { + visible: { type: Boolean, required: true }, + }, + setup(props: Record<'visible', boolean>) { + const visible = toRef(props, 'visible') + + const { currentZIndex } = useZIndex(visible, ref(undefined), 4000) + const style = computed(() => ({ zIndex: currentZIndex.value })) + + return { + style, + } + }, + template: ` +