Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(useZIndex): new composable (#156)
this composable allows handling z-index dynamically avoiding issues where floating elements open behind another floating element
- Loading branch information
Showing
3 changed files
with
100 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import type { InjectionKey, Ref } from 'vue' | ||
import { computed, inject, ref, unref } from 'vue' | ||
import { isNumber } from '@vueuse/core' | ||
|
||
// TODO add Config Provider Component | ||
export const zIndexContextKey: InjectionKey<Ref<number | undefined>> = Symbol('zIndexContextKey') | ||
|
||
const zIndexCounter = ref(0) | ||
export const defaultBaseZIndex = 2000 as const | ||
|
||
export function useZIndex() { | ||
const injectedZIndex = inject(zIndexContextKey) | ||
|
||
const baseZIndex = computed(() => { | ||
const injectedZIndexValue = unref(injectedZIndex) | ||
|
||
return isNumber(injectedZIndexValue) | ||
? injectedZIndexValue | ||
: defaultBaseZIndex | ||
}) | ||
|
||
const activeZIndex = computed(() => baseZIndex.value + zIndexCounter.value) | ||
|
||
const nextZIndex = () => { | ||
zIndexCounter.value++ | ||
|
||
return activeZIndex.value | ||
} | ||
|
||
return { | ||
baseZIndex, | ||
activeZIndex, | ||
nextZIndex, | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import { describe, expect, it } from 'vitest' | ||
import type { ComponentPublicInstance } from 'vue' | ||
import { defineComponent, nextTick, ref } from 'vue' | ||
import type { VueWrapper } from '@vue/test-utils' | ||
import { mount } from '@vue/test-utils' | ||
import { defaultBaseZIndex, useZIndex, zIndexContextKey } from '../../src/composables/useZIndex' | ||
|
||
describe('useZIndex', () => { | ||
let wrapper: VueWrapper<ComponentPublicInstance> | ||
|
||
const mountComponent = (provideZIndex?: number) => mount( | ||
defineComponent({ | ||
setup(_, { expose }) { | ||
const zIndex = useZIndex() | ||
expose(zIndex) | ||
}, | ||
template: '<div></div>', | ||
}), | ||
{ | ||
global: { | ||
provide: { | ||
[zIndexContextKey]: ref(provideZIndex), | ||
}, | ||
}, | ||
}, | ||
) | ||
|
||
it('should have the default baseZIndex when no custom zIndex is provided', async () => { | ||
wrapper = mountComponent() | ||
await nextTick() | ||
expect(wrapper.vm.baseZIndex).toBe(defaultBaseZIndex) | ||
}) | ||
|
||
it('should use the provided custom zIndex', async () => { | ||
const zIndex = 1000 | ||
wrapper = mountComponent(zIndex) | ||
const { vm } = wrapper | ||
await nextTick() | ||
expect(vm.baseZIndex).toBe(zIndex) | ||
}) | ||
|
||
it('should increment zIndex correctly', async () => { | ||
wrapper = mountComponent() | ||
const { vm } = wrapper | ||
await nextTick() | ||
const initialZIndex = vm.activeZIndex | ||
const incrementedZIndex = vm.nextZIndex() | ||
expect(incrementedZIndex).toBe(initialZIndex + 1) | ||
expect(vm.activeZIndex).toBe(initialZIndex + 1) | ||
}) | ||
}) |