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

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

{"version":3,"file":"cell.mjs","sources":["../../../components/grid/cell.ts"],"sourcesContent":["import { computed, defineComponent, h, inject, provide, reactive, watch } from 'vue'\n\nimport { useNameHelper, useProps } from '@vexip-ui/config'\nimport { has, isDefined } from '@vexip-ui/utils'\nimport { cellProps } from './props'\nimport { breakPoints, currentBreakPoint } from './helper'\nimport { GRID_STATE } from './symbol'\n\nimport type { CSSProperties } from 'vue'\nimport type { ClassType } from '@vexip-ui/config'\nimport type { BreakPoint } from './helper'\n\nexport default defineComponent({\n  name: 'Cell',\n  props: cellProps,\n  setup(_props, { slots }) {\n    const props = useProps('cell', _props, {\n      tag: 'div',\n      top: 'auto',\n      left: 'auto',\n      width: null,\n      height: 1,\n      right: '',\n      bottom: '',\n      xs: null,\n      sm: null,\n      md: null,\n      lg: null,\n      xl: null,\n      xxl: null,\n      useFlex: null,\n    })\n\n    const gridState = inject(GRID_STATE, null)\n    const nh = useNameHelper('cell')\n\n    provide(GRID_STATE, null!)\n\n    const layoutState = reactive({\n      top: props.top,\n      right: props.right,\n      bottom: props.bottom,\n      left: props.left,\n      width: props.width,\n      height: props.height,\n    })\n    const layoutKeys = Object.keys(layoutState) as (\n      | 'top'\n      | 'right'\n      | 'bottom'\n      | 'left'\n      | 'width'\n      | 'height'\n    )[]\n\n    const defaultWidth = computed(() => {\n      if (isDefined(props.width)) {\n        return props.width\n      }\n\n      return gridState?.columns && typeof gridState.columns === 'number' ? gridState.columns : 1\n    })\n\n    watch(\n      currentBreakPoint,\n      value => {\n        const matchSize = queryBreakPointOptions(value)\n\n        if (matchSize) {\n          if (typeof matchSize === 'number') {\n            layoutKeys.forEach(key => {\n              layoutState[key] = props[key] as any\n            })\n\n            layoutState.width = matchSize\n          } else {\n            layoutKeys.forEach(key => {\n              layoutState[key] = has(matchSize, key) ? matchSize[key] : (props[key] as any)\n            })\n\n            layoutState.width = layoutState.width ?? defaultWidth.value\n          }\n        } else {\n          layoutKeys.forEach(key => {\n            layoutState[key] = props[key] as any\n          })\n\n          layoutState.width = defaultWidth.value\n        }\n      },\n      { immediate: true },\n    )\n\n    const className = computed(() => {\n      const cellFlex = props.useFlex !== false &&\n        (props.useFlex || gridState?.cellFlex) && {\n        ...(gridState?.cellFlex || {}),\n        ...(props.useFlex\n          ? props.useFlex === true\n            ? { justify: 'start', align: 'top' }\n            : props.useFlex\n          : {}),\n      }\n      const className: ClassType = {\n        [nh.b()]: true,\n        [nh.bm('inherit')]: gridState || props.inherit,\n        [nh.bm('flex')]: cellFlex,\n      }\n\n      if (cellFlex) {\n        if (cellFlex.justify) className[nh.bm(cellFlex.justify)] = true\n        if (cellFlex.align) className[nh.bm(cellFlex.align)] = true\n      }\n\n      return className\n    })\n    const style = computed(() => {\n      const style: CSSProperties = {}\n\n      const topSet = isPositionSet(layoutState.top)\n      const rightSet = isPositionSet(layoutState.right)\n      const bottomSet = isPositionSet(layoutState.bottom)\n      const leftSet = isPositionSet(layoutState.left)\n\n      if (topSet && bottomSet) {\n        style.gridRowStart = parsePosition(layoutState.top)\n        style.gridRowEnd = parsePosition(layoutState.bottom)\n      } else if (topSet) {\n        style.gridRowStart = parsePosition(layoutState.top)\n        style.gridRowEnd = `span ${layoutState.height}`\n      } else if (bottomSet) {\n        style.gridRowStart = `span ${layoutState.height}`\n        style.gridRowEnd = parsePosition(layoutState.bottom)\n      } else {\n        style.gridRowEnd = `span ${layoutState.height}`\n      }\n\n      if (leftSet && rightSet) {\n        style.gridColumnStart = parsePosition(layoutState.left)\n        style.gridColumnEnd = parsePosition(layoutState.right)\n      } else if (leftSet) {\n        style.gridColumnStart = parsePosition(layoutState.left)\n        style.gridColumnEnd = `span ${layoutState.width}`\n      } else if (rightSet) {\n        style.gridColumnStart = `span ${layoutState.width}`\n        style.gridColumnEnd = parsePosition(layoutState.right)\n      } else {\n        style.gridColumnStart = `span ${layoutState.width}`\n      }\n\n      return style\n    })\n\n    function isPositionSet(value: number | string) {\n      return value === 0 || (value && value !== 'auto')\n    }\n\n    function parsePosition(value: number | string) {\n      return typeof value === 'number' ? value + 1 : value\n    }\n\n    function queryBreakPointOptions(breakPoint: BreakPoint) {\n      const index = breakPoints.findIndex(v => v === breakPoint)\n\n      if (~index) {\n        for (let i = index; i >= 0; --i) {\n          if (isDefined(props[breakPoints[i]])) {\n            return props[breakPoints[i]]\n          }\n        }\n      }\n\n      return null\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":["Cell","defineComponent","cellProps","_props","slots","props","useProps","gridState","inject","GRID_STATE","nh","useNameHelper","provide","layoutState","reactive","layoutKeys","defaultWidth","computed","isDefined","watch","currentBreakPoint","value","matchSize","queryBreakPointOptions","key","has","className","cellFlex","style","topSet","isPositionSet","rightSet","bottomSet","leftSet","parsePosition","breakPoint","index","breakPoints","v","i","h","_a"],"mappings":"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"}