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