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