You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.8 KiB
1 line
9.8 KiB
11 months ago
|
{"version":3,"file":"space.mjs","sources":["../../../../../../packages/components/space/src/space.ts"],"sourcesContent":["import {\n defineComponent,\n renderSlot,\n createVNode,\n createTextVNode,\n isVNode,\n} from 'vue'\nimport { isString } from '@vue/shared'\nimport {\n PatchFlags,\n isFragment,\n isValidElementNode,\n} from '@element-plus/utils/vnode'\nimport { isArray, isNumber } from '@element-plus/utils/util'\nimport {\n buildProps,\n componentSize,\n definePropType,\n} from '@element-plus/utils/props'\nimport Item from './item.vue'\nimport { useSpace } from './use-space'\n\nimport type { VNode, StyleValue, ExtractPropTypes, VNodeChild } from 'vue'\nimport type { AlignItemsProperty } from 'csstype'\n\nexport const spaceProps = buildProps({\n direction: {\n type: String,\n values: ['horizontal', 'vertical'],\n default: 'horizontal',\n },\n\n class: {\n type: definePropType<string | string[] | Record<string, boolean>>([\n String,\n Object,\n Array,\n ]),\n default: '',\n },\n\n style: {\n type: definePropType<StyleValue>([String, Array, Object]),\n default: '',\n },\n\n alignment: {\n type: definePropType<AlignItemsProperty>(String),\n default: 'center',\n },\n\n prefixCls: {\n type: String,\n },\n\n spacer: {\n type: definePropType<VNodeChild>([Object, String, Number, Array]),\n default: null,\n validator: (val: unknown) => isVNode(val) || isNumber(val) || isString(val),\n },\n\n wrap: {\n type: Boolean,\n default: false,\n },\n\n fill: {\n type: Boolean,\n default: false,\n },\n\n fillRatio: {\n type: Number,\n default: 100,\n },\n\n size: {\n type: [String, Array, Number],\n values: componentSize,\n validator: (val: unknown): val is [number, number] | number => {\n return (\n isNumber(val) ||\n (isArray(val) && val.length === 2 && val.every((i) => isNumber(i)))\n )\n },\n },\n} as const)\nexport type SpaceProps = ExtractPropTypes<typeof spaceProps>\n\nexport default defineComponent({\n name: 'ElSpace',\n\n props: spaceProps,\n\n setup(props, { slots }) {\n const { classes, containerStyle, itemStyle } = useSpace(props)\n\n return () => {\n const { spacer, prefixCls, direction } = props\n\n const children = renderSlot(slots, 'default', { key: 0 }, () => [])\n // retrieve the children out via a simple for loop\n // the edge case here is that when users uses directives like <v-for>, <v-if>\n // we need to go one layer deeper\n\n if ((children.children ?? []).length === 0) return null\n\n // loop the children, if current children is rendered via `renderList` or `<v-for>`\n if (isArray(children.children)) {\n let extractedChildren: VNode[] = []\n children.children.forEach((child, loopKey) => {\n if (isFragment(child)) {\n if (isArray(child.children)) {\n child.children.forEach((nested, key) => {\n extractedChildren.push(\n createVNode(\n Item,\n {\n style: itemStyle.value,\n prefixCls,\n key: `nested-${key}`,\n },\n {\n default: () => [nested],\n },\n PatchFlags.PROPS | PatchFlags.STYLE,\n ['style', 'prefixCls']\n )\n )\n })\n }\n // if the current child is valid vnode, then append this current vnode\n // to item as child node.\n } else if (isValidElementNode(child)) {\n extractedChildren.push(\n createVNode(\n Item,\n {\n style: itemStyle.value,\n prefixCls,\n key: `LoopKey${loopKey}`,\n },\n {\n default: () => [child],\n },\n PatchFlags.PROPS | PatchFlags.STYLE,\n
|