vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 1.88 kB
Source Map (JSON)
{"version":3,"file":"helper.mjs","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":";;AAMa,MAAAA,IAAc,OAAO,OAAqB,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK,CAAC,GAC/EC,IAAoBC,EAAgB,IAAI;AAErD,IAAIC,GAAU;AAcZ,MAASC,IAAT,WAAkC;AAChC,eAAW,CAACC,GAAOC,CAAK,KAAKC;AAC3B,UAAID,EAAM,SAAS;AACjB,QAAAL,EAAkB,QAAQI;AAC1B;AAAA,MAAA;AAAA,EAGN;AApBM,QAAAG,IAAgB,iBAAiB,SAAS,eAAe,GACzDC,IAAW,CAAC;AAElB,EAAAT,EAAY,QAAQ,CAASK,MAAA;AAC3B,UAAMK,IAAQF,EAAc,iBAAiB,qBAAqBH,CAAK,EAAE,EAAE,KAAK,GAC1EC,IAAQ,WAAW,mBAAmBI,CAAK,EAAE;AAE7C,IAAAJ,EAAA,iBAAiB,UAAUF,CAAsB,GACvDK,EAASJ,CAAK,IAAIC;AAAA,EAAA,CACnB;AAED,QAAMC,IAAe,OAAO,QAAQE,CAAQ,EAAE,QAAQ;AAW/B,EAAAL,EAAA;AACzB;"}