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