42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import { useElementSize } from '@vueuse/core'
|
|
import { type InjectionKey, type Ref, inject, provide, toRef } from 'vue'
|
|
|
|
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize)
|
|
|
|
const containerKey = Symbol('container') as InjectionKey<
|
|
Ref<HTMLElement | null>
|
|
>
|
|
|
|
export const useContainerQueries = (
|
|
el?: HTMLElement | null | Ref<HTMLElement | null>,
|
|
) => {
|
|
const container = inject(containerKey, el ? toRef(el) : toRef(document.body))
|
|
|
|
provide(containerKey, container)
|
|
|
|
const { width } = useElementSize(container)
|
|
|
|
/**
|
|
* @param size unit rem
|
|
*/
|
|
const generator = (size: number) => {
|
|
return (content: any, defaultContent: any = undefined) => {
|
|
return width.value > size * rem ? content : defaultContent
|
|
}
|
|
}
|
|
|
|
return {
|
|
$xs: generator(20),
|
|
$sm: generator(24),
|
|
$md: generator(28),
|
|
$lg: generator(32),
|
|
$xl: generator(36),
|
|
$2xl: generator(42),
|
|
$3xl: generator(48),
|
|
$4xl: generator(54),
|
|
$5xl: generator(60),
|
|
$6xl: generator(66),
|
|
$7xl: generator(72),
|
|
}
|
|
}
|