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'\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":";;;;;AAYA,MAAMA,IAASC,IAAW,SAAS,kBAAkB,QAC/CC,IAAYF,KAAU,iBAAiBA,CAAM;AAE5C,SAASG,EAAoBC,GAAc;AAC5C,MAAA,CAACJ,KAAU,CAACE,EAAW;AAE3B,QAAMG,IAAmC;AAAA,IACvC,OAAO,CAAC;AAAA,IACR,SAAS,CAAC;AAAA,IACV,MAAM,CAAA;AAAA,EACR,GACMC,IAAQC;AAAA,IACZL,EAAU,iBAAiB,mBAAmB,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;AAAA,EAC9E,GACMM,IAAQD;AAAA,IACZL,EAAU,iBAAiB,mBAAmB,KAAK,EAAE,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,EAAE;AAAA,EACpF,GACMO,IAAQT,EAAO;AAErB,WAASU,IAAI,GAAGA,IAAI,IAAI,EAAEA,GAAG;AAC3B,UAAMC,IAAQC,EAASJ,GAAOJ,GAAOM,IAAI,GAAG,EAAE,SAAS,GACjDG,IAAUC,EAAYV,GAAOW,EAAQ,IAAIL,IAAI,KAAK,CAAC,CAAC,EAAE,SAAS;AAErE,IAAAD,EAAM,YAAY,6BAA6BC,CAAC,IAAIC,CAAK,GACzDF,EAAM,YAAY,+BAA+BC,CAAC,IAAIG,CAAO,GAEtDR,EAAA,MAAM,KAAKM,CAAK,GAChBN,EAAA,QAAQ,KAAKQ,CAAO;AAAA,EAAA;AAG7B,WAASH,IAAI,GAAGA,IAAI,GAAG,EAAEA,GAAG;AAC1B,UAAMM,IAAOJ,EAASN,GAAOF,GAAOM,IAAI,GAAG,EAAE,SAAS;AAEtD,IAAAD,EAAM,YAAY,4BAA4BC,CAAC,IAAIM,CAAI,GAChDX,EAAA,KAAK,KAAKW,CAAI;AAAA,EAAA;AAGvB,SAAAP,EAAM,YAAY,4BAA4B,GAAGL,CAAK,EAAE,GAEjDC;AACT;AAEO,SAASY,IAAiB;AACxB,SAAAC;AAAA,IACLC;AAAA,IACAC,EAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,cAAc;AAAA,MACd,eAAe;AAAA,MACf,WAAW;AAAA,MACX,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS,OAAO,OAAO,EAAE;AAAA,MACzB,cAAcC;AAAA,IACf,CAAA;AAAA,EACH;AACF;AAEA,MAAMC,IAAc,OAAO,OAAqB,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK,CAAC;AAE9E,SAASC,EAAcC,GAAkD;AACxE,QAAAC,IAAUC,EAAI,EAAK,GACnBC,IAAgBD,EAAI,CAAC,GAErBE,IAAgB3B,KAAY,iBAAiB,SAAS,eAAe,GACrE4B,IAAgBC,EAAS,MAAM;AAI/B,QAFUH,EAAA,OAEV,OAAOH,EAAM,SAAU,cAAcF,EAAY,SAASE,EAAM,KAAY,GAAG;AACjF,YAAMO,IAAYP,EAAM,UAAU,OAAO,OAAOA,EAAM;AAElD,UAAAO,MAAcC,EAAkB,MAAc,QAAA;AAE5C,YAAAC,IACJL,KAAiBA,EAAc,iBAAiB,qBAAqBG,CAAS,EAAE,EAAE,KAAK;AAElF,aAAAE,KAAS,mBAAmBA,CAAK;AAAA,IAAA;AAG1C,WAAOT,EAAM;AAAA,EAAA,CACd;AAED,MAAIU,IAAY,IACZC;AAEJ,QAAMC,IAAS,MAAM;AACf,QAAA,OAAOP,EAAc,SAAU,WAAW;AAC5C,MAAAJ,EAAQ,QAAQI,EAAc;AAC9B;AAAA,IAAA;AAGF,QAAI,CAACA,EAAc,SAASA,EAAc,UAAU,OAAO;AACzD,MAAAJ,EAAQ,QAAQ;AAChB;AAAA,IAAA;AAGE,QAAAI,EAAc,UAAU,OAAO;AACjC,MAAAJ,EAAQ,QAAQ;AAChB;AAAA,IAAA;AAGE,QAAA,OAAOI,EAAc,SAAU,YAAY;AAC7C,MAAAJ,EAAQ,QAAQI,EAAc,MAAMG,EAAkB,KAAK;AAC3D;AAAA,IAAA;AAGF,IAAIE,MACWC,IAAA,WAAWN,EAAc,KAAK,GAC/BM,KAAA,QAAAA,EAAA,iBAAiB,UAAUC,KAGzCX,EAAQ,QAAQU,EAAY;AAAA,EAC9B;AAEA,SAAAE,EAAMR,GAAe,MAAM;AAClB,IAAAO,EAAA;AAAA,EAAA,CACR,GAEDE,EAAU,MAAM;AACd,MAAEX,EAAc,OACJO,IAAA,IACLE,EAAA;AAAA,EAAA,CACR,GAEDG,EAAgB,MAAM;AACR,IAAAL,IAAA,IACAC,KAAA,QAAAA,EAAA,oBAAoB,UAAUC,IAC7BD,IAAA;AAAA,EAAA,CACd,GAEMV;AACT;AAEO,SAASe,IAAmB;AAC3B,QAAAC,IAAUf,EAAI,CAAC;AAErB,SAAAY,EAAU,MAAM;AACN,IAAAG,EAAA;AAAA,EAAA,CACT,GACDC,EAAU,MAAM;AACN,IAAAD,EAAA;AAAA,EAAA,CACT,GAEMA;AACT;"}