@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 1.94 kB
Source Map (JSON)
{"version":3,"file":"helper.mjs","sources":["../../../components/grid/helper.ts"],"sourcesContent":["import { ref } from 'vue'\r\n\r\nimport { isClient } from '@vexip-ui/utils'\r\n\r\nexport type BreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\r\n\r\nexport const breakPoints = Object.freeze<BreakPoint[]>(['xs', 'sm', 'md', 'lg', 'xl', 'xxl'])\r\nexport const currentBreakPoint = ref<BreakPoint>('xs')\r\n\r\nif (isClient) {\r\n const computedStyle = getComputedStyle(document.documentElement)\r\n const queryMap = {} as Record<BreakPoint, MediaQueryList>\r\n\r\n breakPoints.forEach(point => {\r\n const media = computedStyle.getPropertyValue(`--vxp-break-point-${point}`).trim()\r\n const query = matchMedia(`only screen and ${media}`)\r\n\r\n query.addEventListener('change', handleBreakPointChange)\r\n queryMap[point] = query\r\n })\r\n\r\n const queryEntries = Object.entries(queryMap).reverse() as [BreakPoint, MediaQueryList][]\r\n\r\n function handleBreakPointChange() {\r\n for (const [point, query] of queryEntries) {\r\n if (query.matches) {\r\n currentBreakPoint.value = point\r\n break\r\n }\r\n }\r\n }\r\n\r\n handleBreakPointChange()\r\n}\r\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;"}