vexip-ui/es/components/grid/grid.mjs.map

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

{"version":3,"file":"grid.mjs","sources":["../../../components/grid/grid.ts"],"sourcesContent":["import { computed, defineComponent, h, provide, reactive, toRef } from 'vue'\n\nimport { useNameHelper, useProps } from '@vexip-ui/config'\nimport { gridProps } from './props'\nimport { GRID_STATE } from './symbol'\n\nimport type { CSSProperties } from 'vue'\nimport type { GridAlign, GridJustify, LayoutProp } from './symbol'\n\nconst numberRE = /^\\d+$/\n\nconst justifyList = Object.freeze<GridJustify[]>([\n  'start',\n  'end',\n  'center',\n  'space-around',\n  'space-between',\n  'space-evenly',\n])\nconst alignList = Object.freeze<GridAlign[]>(['top', 'middle', 'bottom', 'stretch'])\n\nexport default defineComponent({\n  name: 'Grid',\n  props: gridProps,\n  setup(_props, { slots }) {\n    const props = useProps('grid', _props, {\n      tag: 'div',\n      gap: 0,\n      rows: 'none',\n      columns: 24,\n      autoRows: 'auto',\n      autoColumns: 'auto',\n      dense: false,\n      justify: {\n        default: 'start',\n        validator: value => justifyList.includes(value),\n      },\n      align: {\n        default: 'stretch',\n        validator: value => alignList.includes(value),\n      },\n      cellFlex: false,\n    })\n\n    const nh = useNameHelper('grid')\n\n    const className = computed(() => {\n      return {\n        [nh.b()]: true,\n        [nh.bm(props.justify)]: true,\n        [nh.bm('inherit')]: props.inherit,\n        [nh.bm(props.align)]: props.align !== 'stretch',\n        [nh.bm('dense')]: props.dense,\n      }\n    })\n    const style = computed(() => {\n      const style: CSSProperties = {}\n\n      if (props.gap) {\n        style.gap = Array.isArray(props.gap)\n          ? `${props.gap[0]}px ${props.gap[1]}px`\n          : `${props.gap}px`\n      }\n\n      style.gridTemplateColumns = parseSizeLayout(props.columns)\n\n      if (props.rows !== 'none') {\n        style.gridTemplateRows = parseSizeLayout(props.rows)\n      }\n\n      if (props.autoRows !== 'auto') {\n        style.gridAutoRows = parseAutoLayout(props.autoRows)\n      }\n\n      if (props.autoColumns !== 'auto') {\n        style.gridAutoColumns = parseAutoLayout(props.autoColumns)\n      }\n\n      return style\n    })\n    const cellFlex = computed(() => {\n      if (props.cellFlex === true) {\n        return {\n          justify: 'start',\n          align: 'top',\n        } as const\n      } else if (props.cellFlex) {\n        return {\n          justify: 'start',\n          align: 'top',\n          ...props.cellFlex,\n        } as const\n      }\n\n      return false\n    })\n\n    provide(GRID_STATE, reactive({ cellFlex, columns: toRef(props, 'columns') }))\n\n    function parseSizeLayout(value: LayoutProp) {\n      if (typeof value === 'number') {\n        return `repeat(${value}, 1fr)`\n      }\n\n      if (typeof value === 'string') {\n        return numberRE.test(value.trim()) ? `repeat(${value}, 1fr)` : value\n      }\n\n      if (Array.isArray(value)) {\n        return value\n          .map(item => {\n            if (typeof item === 'number') {\n              return `${item}fr`\n            }\n\n            if (typeof item === 'string') {\n              return numberRE.test(item.trim()) ? `${item}fr` : item\n            }\n\n            return item\n          })\n          .join(' ')\n      }\n\n      return value\n    }\n\n    function parseAutoLayout(value: LayoutProp) {\n      if (typeof value === 'number') {\n        return `${value}fr`\n      }\n\n      if (typeof value === 'string') {\n        return numberRE.test(value.trim()) ? `repeat(${value}, 1fr)` : value\n      }\n\n      if (Array.isArray(value)) {\n        return value\n          .map(item => {\n            if (typeof item === 'number') {\n              return `${item}fr`\n            }\n\n            if (typeof item === 'string') {\n              return numberRE.test(item.trim()) ? `${item}fr` : item\n            }\n\n            return item\n          })\n          .join(' ')\n      }\n\n      return value\n    }\n\n    return () =>\n      h(\n        props.tag || 'div',\n        {\n          class: className.value,\n          style: style.value,\n        },\n        {\n          default: () => slots.default?.(),\n        },\n      )\n  },\n})\n"],"names":["numberRE","justifyList","alignList","Grid","defineComponent","gridProps","_props","slots","props","useProps","value","nh","useNameHelper","className","computed","style","parseSizeLayout","parseAutoLayout","cellFlex","provide","GRID_STATE","reactive","toRef","item","h","_a"],"mappings":"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"}