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
11 KiB
1 line
11 KiB
2 years ago
|
{"version":3,"file":"space.mjs","sources":["../../../../../../packages/components/space/src/space.ts"],"sourcesContent":["import {\n createTextVNode,\n createVNode,\n defineComponent,\n isVNode,\n renderSlot,\n} from 'vue'\nimport { isString } from '@vue/shared'\nimport {\n PatchFlags,\n buildProps,\n definePropType,\n isArray,\n isFragment,\n isNumber,\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 ExtractPropTypes,\n StyleValue,\n VNode,\n VNodeArrayChildren,\n VNodeChild,\n} from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { AlignItemsProperty } from 'csstype'\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<AlignItemsProperty>(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>\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 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 // if the current child is valid vnode, t
|