@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 9.17 kB
Source Map (JSON)
{"version":3,"file":"space.mjs","sources":["../../../components/space/space.tsx"],"sourcesContent":["import { computed, defineComponent, renderSlot } from 'vue'\r\n\r\nimport { useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { flatVNodes } from '@vexip-ui/hooks'\r\nimport { supportFlexGap } from '@vexip-ui/utils'\r\nimport { spaceProps } from './props'\r\n\r\nimport type { ClassType } from '@vexip-ui/config'\r\nimport type { SpaceAlign, SpaceJustify } from './symbol'\r\n\r\nconst justifyList = Object.freeze<SpaceJustify[]>([\r\n 'start',\r\n 'end',\r\n 'center',\r\n 'space-around',\r\n 'space-between',\r\n 'space-evenly',\r\n])\r\nconst alignList = Object.freeze<SpaceAlign[]>(['start', 'end', 'center', 'baseline', 'stretch'])\r\n\r\nconst useFlexGap = supportFlexGap()\r\n\r\nfunction parseFlexStyle(value: string) {\r\n return value === 'start' || value === 'end' ? `flex-${value}` : value\r\n}\r\n\r\nexport default defineComponent({\r\n name: 'Space',\r\n props: spaceProps,\r\n setup(_props, { slots }) {\r\n const props = useProps('space', _props, {\r\n vertical: false,\r\n inline: false,\r\n tag: 'div',\r\n align: {\r\n default: 'stretch',\r\n validator: value => alignList.includes(value),\r\n },\r\n justify: {\r\n default: 'start',\r\n validator: value => justifyList.includes(value),\r\n },\r\n noWrap: false,\r\n size: 'default',\r\n itemStyle: null,\r\n gapDisabled: !useFlexGap,\r\n })\r\n\r\n const nh = useNameHelper('space')\r\n const varMap: Record<string, any> = {\r\n h: `var(${nh.cv('h-gap')})`,\r\n hh: `calc(var(${nh.cv('h-gap')}) * 0.5)`,\r\n mhh: `calc(var(${nh.cv('h-gap')}) * -0.5)`,\r\n v: `var(${nh.cv('v-gap')})`,\r\n hv: `calc(var(${nh.cv('v-gap')}) * 0.5)`,\r\n mhv: `calc(var(${nh.cv('v-gap')}) * -0.5)`,\r\n }\r\n\r\n const className = computed(() => {\r\n const className: ClassType = {\r\n [nh.b()]: true,\r\n [nh.bs('vars')]: true,\r\n [nh.bm('inherit')]: props.inherit,\r\n [nh.bm('inline')]: props.inline,\r\n [nh.bm('vertical')]: props.vertical,\r\n [nh.bm('no-wrap')]: props.vertical || props.noWrap,\r\n [nh.bm('no-gap')]: props.gapDisabled,\r\n }\r\n\r\n if (typeof props.size === 'string' && props.size !== 'default') {\r\n className[nh.bm(props.size)] = true\r\n }\r\n\r\n return className\r\n })\r\n const style = computed(() => {\r\n const { justify, align, size } = props\r\n\r\n const style: Record<string, string> = {\r\n alignItems: parseFlexStyle(align),\r\n justifyContent: parseFlexStyle(justify),\r\n }\r\n\r\n if (typeof size !== 'string') {\r\n const normalizedSize = Array.isArray(size) ? size : [size, size]\r\n\r\n style[nh.cv('h-gap')] = `${normalizedSize[0]}px`\r\n style[nh.cv('v-gap')] = `${normalizedSize[1]}px`\r\n }\r\n\r\n if (props.gapDisabled && !props.vertical) {\r\n style.marginTop = varMap.mhv\r\n style.marginBottom = varMap.mhv\r\n }\r\n\r\n return style\r\n })\r\n\r\n return () => {\r\n const CustomTag = props.tag || ('div' as any)\r\n const children = renderSlot(slots, 'default').children\r\n\r\n if (!children?.length) {\r\n return <CustomTag class={className.value} style={style.value}></CustomTag>\r\n }\r\n\r\n const vnodes = flatVNodes(children)\r\n const lastIndex = vnodes.length - 1\r\n const justify = props.justify\r\n const justifySpace = justify.startsWith('space')\r\n const notBetween = justify !== 'space-between'\r\n\r\n return (\r\n <CustomTag class={className.value} style={style.value}>\r\n {vnodes.map((vnode, index) => (\r\n <div\r\n key={index}\r\n class={nh.be('item')}\r\n role={'none'}\r\n style={[\r\n props.itemStyle,\r\n !props.gapDisabled\r\n ? ''\r\n : props.vertical\r\n ? {\r\n marginBottom: index !== lastIndex ? varMap.v : undefined,\r\n }\r\n : {\r\n paddingTop: varMap.hv,\r\n paddingBottom: varMap.hv,\r\n marginRight: justifySpace\r\n ? notBetween || index !== lastIndex\r\n ? varMap.hh\r\n : undefined\r\n : index !== lastIndex\r\n ? varMap.h\r\n : undefined,\r\n marginLeft: justifySpace\r\n ? notBetween || index !== 0\r\n ? varMap.hh\r\n : undefined\r\n : undefined,\r\n },\r\n ]}\r\n >\r\n {vnode}\r\n </div>\r\n ))}\r\n </CustomTag>\r\n )\r\n }\r\n },\r\n})\r\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","justifyList","freeze","alignList","useFlexGap","supportFlexGap","parseFlexStyle","value","defineComponent","name","props","spaceProps","setup","_props","slots","useProps","vertical","inline","tag","align","default","validator","includes","justify","noWrap","size","itemStyle","gapDisabled","nh","useNameHelper","varMap","h","cv","hh","mhh","v","hv","mhv","className","computed","b","bs","bm","inherit","style","alignItems","justifyContent","normalizedSize","Array","isArray","marginTop","marginBottom","_slot","CustomTag","children","renderSlot","length","_createVNode","vnodes","flatVNodes","lastIndex","justifySpace","startsWith","notBetween","map","vnode","index","be","undefined","paddingTop","paddingBottom","marginRight","marginLeft"],"mappings":"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"}