vexip-ui/lib/components/layout/helper.cjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"helper.cjs","sources":["../../../components/layout/helper.ts"],"sourcesContent":["import { currentBreakPoint } from '@/components/grid'\n\nimport { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'\n\nimport { adjustAlpha, isClient, mixColor, noop, parseColorToRgba, toFixed } from '@vexip-ui/utils'\nimport { LAYOUT_STATE } from './symbol'\n\nimport type { Ref } from 'vue'\nimport type { Color } from '@vexip-ui/utils'\nimport type { BreakPoint } from '@/components/grid'\nimport type { LayoutMediaJudger, LayoutState } from './symbol'\n\nconst rootEl = isClient ? document.documentElement : undefined\nconst rootStyle = rootEl && getComputedStyle(rootEl)\n\nexport function computeSeriesColors(value: Color) {\n  if (!rootEl || !rootStyle) return\n\n  const colors: Record<string, string[]> = {\n    light: [],\n    opacity: [],\n    dark: [],\n  }\n  const black = parseColorToRgba(\n    rootStyle.getPropertyValue('--vxp-color-black') || { r: 0, g: 0, b: 0, a: 1 },\n  )\n  const white = parseColorToRgba(\n    rootStyle.getPropertyValue('--vxp-color-white') || { r: 255, g: 255, b: 255, a: 1 },\n  )\n  const style = rootEl.style\n\n  for (let i = 1; i < 10; ++i) {\n    const light = mixColor(white, value, i * 0.1).toString()\n    const opacity = adjustAlpha(value, toFixed(1 - i * 0.1, 1)).toString()\n\n    style.setProperty(`--vxp-color-primary-light-${i}`, light)\n    style.setProperty(`--vxp-color-primary-opacity-${i}`, opacity)\n\n    colors.light.push(light)\n    colors.opacity.push(opacity)\n  }\n\n  for (let i = 1; i < 3; ++i) {\n    const dark = mixColor(black, value, i * 0.1).toString()\n\n    style.setProperty(`--vxp-color-primary-dark-${i}`, dark)\n    colors.dark.push(dark)\n  }\n\n  style.setProperty('--vxp-color-primary-base', `${value}`)\n\n  return colors\n}\n\nexport function useLayoutState() {\n  return inject(\n    LAYOUT_STATE,\n    reactive({\n      isLayout: false,\n      locked: false,\n      affixed: false,\n      scrollY: 0,\n      affixMatched: false,\n      expandMatched: false,\n      useExpand: false,\n      expanded: false,\n      reduced: false,\n      navConfig: false,\n      classes: Object.freeze({}),\n      changeInLock: noop,\n    }) as LayoutState,\n  )\n}\n\nconst breakPoints = Object.freeze<BreakPoint[]>(['xs', 'sm', 'md', 'lg', 'xl', 'xxl'])\n\nexport function useMediaQuery(query: Ref<boolean | string | LayoutMediaJudger>) {\n  const matched = ref(false)\n  const updateTrigger = ref(0)\n\n  const computedStyle = isClient && getComputedStyle(document.documentElement)\n  const computedQuery = computed(() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n    updateTrigger.value\n\n    if (typeof query.value !== 'function' && breakPoints.includes(query.value as any)) {\n      const usedQuery = query.value === 'xs' ? 'sm' : query.value\n\n      if (usedQuery === currentBreakPoint.value) return true\n\n      const media =\n        computedStyle && computedStyle.getPropertyValue(`--vxp-break-point-${usedQuery}`).trim()\n\n      return media && `only screen and ${media}`\n    }\n\n    return query.value\n  })\n\n  let isMounted = false\n  let mediaQuery: MediaQueryList | undefined\n\n  const update = () => {\n    if (typeof computedQuery.value === 'boolean') {\n      matched.value = computedQuery.value\n      return\n    }\n\n    if (!computedQuery.value || computedQuery.value === 'min') {\n      matched.value = false\n      return\n    }\n\n    if (computedQuery.value === 'max') {\n      matched.value = true\n      return\n    }\n\n    if (typeof computedQuery.value === 'function') {\n      matched.value = computedQuery.value(currentBreakPoint.value)\n      return\n    }\n\n    if (isMounted) {\n      mediaQuery = matchMedia(computedQuery.value)\n      mediaQuery?.addEventListener('change', update)\n    }\n\n    matched.value = mediaQuery!.matches\n  }\n\n  watch(computedQuery, () => {\n    update()\n  })\n\n  onMounted(() => {\n    ++updateTrigger.value\n    isMounted = true\n    update()\n  })\n\n  onBeforeUnmount(() => {\n    isMounted = false\n    mediaQuery?.removeEventListener('change', update)\n    mediaQuery = undefined\n  })\n\n  return matched\n}\n\nexport function useUpdateCounter() {\n  const counter = ref(0)\n\n  onMounted(() => {\n    counter.value++\n  })\n  onUpdated(() => {\n    counter.value++\n  })\n\n  return counter\n}\n"],"names":["rootEl","isClient","rootStyle","computeSeriesColors","value","colors","black","parseColorToRgba","white","style","i","light","mixColor","opacity","adjustAlpha","toFixed","dark","useLayoutState","inject","LAYOUT_STATE","reactive","noop","breakPoints","useMediaQuery","query","matched","ref","updateTrigger","computedStyle","computedQuery","computed","usedQuery","currentBreakPoint","media","isMounted","mediaQuery","update","watch","onMounted","onBeforeUnmount","useUpdateCounter","counter","onUpdated"],"mappings":"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"}