element-plus
Version:
A Component Library for Vue 3
1 lines • 11.8 kB
Source Map (JSON)
{"version":3,"file":"space.mjs","sources":["../../../../../../packages/components/space/src/space.ts"],"sourcesContent":["import {\n Comment,\n createTextVNode,\n createVNode,\n defineComponent,\n isVNode,\n renderSlot,\n} from 'vue'\nimport {\n PatchFlags,\n buildProps,\n definePropType,\n isArray,\n isFragment,\n isNumber,\n isString,\n isValidElementNode,\n} from '@element-plus/utils'\nimport { componentSizes } from '@element-plus/constants'\nimport Item from './item'\nimport { useSpace } from './use-space'\n\nimport type {\n CSSProperties,\n ExtractPropTypes,\n ExtractPublicPropTypes,\n StyleValue,\n VNode,\n VNodeArrayChildren,\n VNodeChild,\n} from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\n\nexport const spaceProps = buildProps({\n /**\n * @description Placement direction\n */\n direction: {\n type: String,\n values: ['horizontal', 'vertical'],\n default: 'horizontal',\n },\n /**\n * @description Classname\n */\n class: {\n type: definePropType<Arrayable<Record<string, boolean> | string>>([\n String,\n Object,\n Array,\n ]),\n default: '',\n },\n /**\n * @description Extra style rules\n */\n style: {\n type: definePropType<StyleValue>([String, Array, Object]),\n default: '',\n },\n /**\n * @description Controls the alignment of items\n */\n alignment: {\n type: definePropType<CSSProperties['align-items']>(String),\n default: 'center',\n },\n /**\n * @description Prefix for space-items\n */\n prefixCls: {\n type: String,\n },\n /**\n * @description Spacer\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 * @description Auto wrapping\n */\n wrap: Boolean,\n /**\n * @description Whether to fill the container\n */\n fill: Boolean,\n /**\n * @description Ratio of fill\n */\n fillRatio: {\n type: Number,\n default: 100,\n },\n /**\n * @description Spacing size\n */\n size: {\n type: [String, Array, Number],\n values: componentSizes,\n validator: (val: unknown): val is [number, number] | number => {\n return (\n isNumber(val) ||\n (isArray(val) && val.length === 2 && val.every(isNumber))\n )\n },\n },\n} as const)\nexport type SpaceProps = ExtractPropTypes<typeof spaceProps>\nexport type SpacePropsPublic = ExtractPublicPropTypes<typeof spaceProps>\n\nconst Space = defineComponent({\n name: 'ElSpace',\n\n props: spaceProps,\n\n setup(props, { slots }) {\n const { classes, containerStyle, itemStyle } = useSpace(props)\n\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 deeper until the child is not the Fragment type\n function extractChildren(\n children: VNodeArrayChildren,\n parentKey = '',\n extractedChildren: VNode[] = []\n ) {\n const { prefixCls } = props\n children.forEach((child, loopKey) => {\n if (isFragment(child)) {\n if (isArray(child.children)) {\n child.children.forEach((nested, key) => {\n if (isFragment(nested) && isArray(nested.children)) {\n extractChildren(\n nested.children,\n `${parentKey + key}-`,\n extractedChildren\n )\n } else {\n if (isVNode(nested) && nested?.type === Comment) {\n extractedChildren.push(nested)\n } else {\n extractedChildren.push(\n createVNode(\n Item,\n {\n style: itemStyle.value,\n prefixCls,\n key: `nested-${parentKey + key}`,\n },\n {\n default: () => [nested],\n },\n PatchFlags.PROPS | PatchFlags.STYLE,\n ['style', 'prefixCls']\n )\n )\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${parentKey + loopKey}`,\n },\n {\n default: () => [child],\n },\n PatchFlags.PROPS | PatchFlags.STYLE,\n ['style', 'prefixCls']\n )\n )\n }\n })\n\n return extractedChildren\n }\n\n return () => {\n const { spacer, direction } = props\n\n const children = renderSlot(slots, 'default', { key: 0 }, () => [])\n\n if ((children.children ?? []).length === 0) return null\n // loop the children, if current children is rendered via `renderList` or `<v-for>`\n if (isArray(children.children)) {\n let extractedChildren = extractChildren(children.children)\n\n if (spacer) {\n // track the current rendering index, when encounters the last element\n // then no need to add a spacer after it.\n const len = extractedChildren.length - 1\n extractedChildren = extractedChildren.reduce<VNode[]>(\n (acc, child, idx) => {\n const children = [...acc, child]\n if (idx !== len) {\n children.push(\n createVNode(\n 'span',\n // adding width 100% for vertical alignment,\n // when the spacer inherit the width from the\n // parent, this span's width was not set, so space\n // might disappear\n {\n style: [\n itemStyle.value,\n direction === 'vertical' ? 'width: 100%' : null,\n ],\n key: idx,\n },\n [\n // if spacer is already a valid vnode, then append it to the current\n // span element.\n // otherwise, treat it as string.\n isVNode(spacer)\n ? spacer\n : createTextVNode(spacer as string, PatchFlags.TEXT),\n ],\n PatchFlags.STYLE\n )\n )\n }\n return children\n },\n []\n )\n }\n\n // spacer container.\n return createVNode(\n 'div',\n {\n class: classes.value,\n style: containerStyle.value,\n },\n extractedChildren,\n PatchFlags.STYLE | PatchFlags.CLASS\n )\n }\n\n return children.children\n }\n },\n})\n\nexport type SpaceInstance = InstanceType<typeof Space> & unknown\n\nexport default Space\n"],"names":["Item","children"],"mappings":"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"}