vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 6.25 kB
Source Map (JSON)
{"version":3,"file":"column.mjs","sources":["../../../components/row/column.ts"],"sourcesContent":["import { computed, defineComponent, h, inject, provide } from 'vue'\n\nimport { useNameHelper, useProps } from '@vexip-ui/config'\nimport { columnProps } from './props'\nimport { ROW_STATE, breakPoints } from './symbol'\n\nimport type { CSSProperties } from 'vue'\nimport type { ClassType } from '@vexip-ui/config'\n\ntype LayerProp = 'span' | 'offset' | 'pull' | 'push' | 'order'\n\nconst colProps: LayerProp[] = ['span', 'offset', 'pull', 'push', 'order']\n\nexport default defineComponent({\n name: 'Column',\n props: columnProps,\n setup(_props, { slots }) {\n const props = useProps('column', _props, {\n tag: 'div',\n span: 24,\n offset: null,\n push: null,\n pull: null,\n order: null,\n xs: null,\n sm: null,\n md: null,\n lg: null,\n xl: null,\n xxl: null,\n flex: null,\n useFlex: null,\n })\n\n const rowState = inject(ROW_STATE, null)\n const nh = useNameHelper('column')\n\n provide(ROW_STATE, null!)\n\n const className = computed(() => {\n const columnFlex = (props.useFlex || rowState?.columnFlex) && {\n ...(rowState?.columnFlex || {}),\n ...(props.useFlex\n ? props.useFlex === true\n ? { justify: 'start', align: 'top' }\n : props.useFlex\n : {}),\n }\n const className: ClassType = [\n nh.b(),\n nh.bs('vars'),\n {\n [nh.bm('flex')]: columnFlex,\n [nh.bm('inherit')]: rowState || props.inherit,\n },\n ]\n\n if (columnFlex) {\n columnFlex.justify && className.push(nh.bm(columnFlex.justify))\n columnFlex.align && className.push(nh.bm(columnFlex.align))\n }\n\n colProps.forEach(prop => {\n if (typeof props[prop] === 'number') {\n className.push(\n prop === 'span' ? nh.bm(`${props[prop]}`) : nh.bm(`${prop}-${props[prop]}`),\n )\n }\n })\n\n breakPoints.forEach(size => {\n const sizeProp = props[size]\n\n if (!sizeProp && sizeProp !== 0) return\n\n if (typeof sizeProp === 'number') {\n className.push(nh.bm(`${size}-${sizeProp}`))\n } else if (typeof sizeProp === 'object') {\n colProps.forEach(prop => {\n const value = sizeProp[prop]\n\n if (!value && value !== 0) return\n\n className.push(prop === 'span' ? nh.bm(`${value}`) : nh.bm(`${prop}-${value}`))\n })\n }\n })\n\n return className\n })\n const style = computed(() => {\n const flex = props.flex\n const style: CSSProperties = {}\n\n if (rowState) {\n if (typeof rowState.gap === 'number') {\n style.paddingInlineStart = style.paddingInlineEnd = `${rowState.gap / 2}px`\n } else if (Array.isArray(rowState.gap)) {\n style.paddingInlineStart = style.paddingInlineEnd = `${rowState.gap[0] / 2}px`\n }\n }\n\n if (flex) {\n if (typeof flex === 'number') {\n style.flex = `${flex} ${flex} auto`\n } else if (typeof flex === 'string') {\n if (/^\\d+\\s\\d+\\s\\d+(\\w+)?$/.test(flex)) {\n style.flex = flex\n } else {\n style.flex = flex === 'auto' ? '1 1 auto' : `0 0 ${flex}`\n }\n }\n }\n\n return style\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 && slots.default(),\n },\n )\n },\n})\n"],"names":["colProps","Column","defineComponent","columnProps","_props","slots","props","useProps","rowState","inject","ROW_STATE","nh","useNameHelper","provide","className","computed","columnFlex","prop","breakPoints","size","sizeProp","value","style","flex","h"],"mappings":"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"}