@extclp/vexip-ui/es/components/layout/helper.mjs.map

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

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