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

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

{"version":3,"file":"helper.cjs","sources":["../../../components/grid/helper.ts"],"sourcesContent":["import { ref } from 'vue'\n\nimport { isClient } from '@vexip-ui/utils'\n\nexport type BreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n\nexport const breakPoints = Object.freeze<BreakPoint[]>(['xs', 'sm', 'md', 'lg', 'xl', 'xxl'])\nexport const currentBreakPoint = ref<BreakPoint>('xs')\n\nif (isClient) {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const queryMap = {} as Record<BreakPoint, MediaQueryList>\n\n  breakPoints.forEach(point => {\n    const media = computedStyle.getPropertyValue(`--vxp-break-point-${point}`).trim()\n    const query = matchMedia(`only screen and ${media}`)\n\n    query.addEventListener('change', handleBreakPointChange)\n    queryMap[point] = query\n  })\n\n  const queryEntries = Object.entries(queryMap).reverse() as [BreakPoint, MediaQueryList][]\n\n  function handleBreakPointChange() {\n    for (const [point, query] of queryEntries) {\n      if (query.matches) {\n        currentBreakPoint.value = point\n        break\n      }\n    }\n  }\n\n  handleBreakPointChange()\n}\n"],"names":["breakPoints","currentBreakPoint","ref","isClient","handleBreakPointChange","point","query","queryEntries","computedStyle","queryMap","media"],"mappings":"oIAMaA,EAAc,OAAO,OAAqB,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,KAAK,CAAC,EAC/EC,EAAoBC,MAAgB,IAAI,EAErD,GAAIC,WAAU,CAcZ,IAASC,EAAT,UAAkC,CAChC,SAAW,CAACC,EAAOC,CAAK,IAAKC,EAC3B,GAAID,EAAM,QAAS,CACjBL,EAAkB,MAAQI,EAC1B,KAAA,CAGN,EApBM,MAAAG,EAAgB,iBAAiB,SAAS,eAAe,EACzDC,EAAW,CAAC,EAElBT,EAAY,QAAiBK,GAAA,CAC3B,MAAMK,EAAQF,EAAc,iBAAiB,qBAAqBH,CAAK,EAAE,EAAE,KAAK,EAC1EC,EAAQ,WAAW,mBAAmBI,CAAK,EAAE,EAE7CJ,EAAA,iBAAiB,SAAUF,CAAsB,EACvDK,EAASJ,CAAK,EAAIC,CAAA,CACnB,EAED,MAAMC,EAAe,OAAO,QAAQE,CAAQ,EAAE,QAAQ,EAW/BL,EAAA,CACzB"}