hiderfong
120 lines
3.6 KiB
JavaScript
120 lines
3.6 KiB
JavaScript
import { componentSizes } from "../../../constants/size.mjs";
|
|
import { isArray, isNumber, isString } from "../../../utils/types.mjs";
|
|
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
|
|
import { PatchFlags, isFragment, isValidElementNode } from "../../../utils/vue/vnode.mjs";
|
|
import SpaceItem from "./item.mjs";
|
|
import { useSpace } from "./use-space.mjs";
|
|
import { Comment, createTextVNode, createVNode, defineComponent, isVNode, renderSlot } from "vue";
|
|
|
|
//#region ../../packages/components/space/src/space.ts
|
|
const spaceProps = buildProps({
|
|
direction: {
|
|
type: String,
|
|
values: ["horizontal", "vertical"],
|
|
default: "horizontal"
|
|
},
|
|
class: {
|
|
type: definePropType([
|
|
String,
|
|
Object,
|
|
Array
|
|
]),
|
|
default: ""
|
|
},
|
|
style: {
|
|
type: definePropType([
|
|
String,
|
|
Array,
|
|
Object
|
|
]),
|
|
default: ""
|
|
},
|
|
alignment: {
|
|
type: definePropType(String),
|
|
default: "center"
|
|
},
|
|
prefixCls: { type: String },
|
|
spacer: {
|
|
type: definePropType([
|
|
Object,
|
|
String,
|
|
Number,
|
|
Array
|
|
]),
|
|
default: null,
|
|
validator: (val) => isVNode(val) || isNumber(val) || isString(val)
|
|
},
|
|
wrap: Boolean,
|
|
fill: Boolean,
|
|
fillRatio: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
size: {
|
|
type: [
|
|
String,
|
|
Array,
|
|
Number
|
|
],
|
|
values: componentSizes,
|
|
validator: (val) => {
|
|
return isNumber(val) || isArray(val) && val.length === 2 && val.every(isNumber);
|
|
}
|
|
}
|
|
});
|
|
const Space = defineComponent({
|
|
name: "ElSpace",
|
|
props: spaceProps,
|
|
setup(props, { slots }) {
|
|
const { classes, containerStyle, itemStyle } = useSpace(props);
|
|
function extractChildren(children, parentKey = "", extractedChildren = []) {
|
|
const { prefixCls } = props;
|
|
children.forEach((child, loopKey) => {
|
|
if (isFragment(child)) {
|
|
if (isArray(child.children)) child.children.forEach((nested, key) => {
|
|
if (isFragment(nested) && isArray(nested.children)) extractChildren(nested.children, `${parentKey + key}-`, extractedChildren);
|
|
else if (isVNode(nested) && nested?.type === Comment) extractedChildren.push(nested);
|
|
else extractedChildren.push(createVNode(SpaceItem, {
|
|
style: itemStyle.value,
|
|
prefixCls,
|
|
key: `nested-${parentKey + key}`
|
|
}, { default: () => [nested] }, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"]));
|
|
});
|
|
} else if (isValidElementNode(child)) extractedChildren.push(createVNode(SpaceItem, {
|
|
style: itemStyle.value,
|
|
prefixCls,
|
|
key: `LoopKey${parentKey + loopKey}`
|
|
}, { default: () => [child] }, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"]));
|
|
});
|
|
return extractedChildren;
|
|
}
|
|
return () => {
|
|
const { spacer, direction } = props;
|
|
const children = renderSlot(slots, "default", { key: 0 }, () => []);
|
|
if ((children.children ?? []).length === 0) return null;
|
|
if (isArray(children.children)) {
|
|
let extractedChildren = extractChildren(children.children);
|
|
if (spacer) {
|
|
const len = extractedChildren.length - 1;
|
|
extractedChildren = extractedChildren.reduce((acc, child, idx) => {
|
|
const children = [...acc, child];
|
|
if (idx !== len) children.push(createVNode("span", {
|
|
style: [itemStyle.value, direction === "vertical" ? "width: 100%" : null],
|
|
key: idx
|
|
}, [isVNode(spacer) ? spacer : createTextVNode(spacer, PatchFlags.TEXT)], PatchFlags.STYLE));
|
|
return children;
|
|
}, []);
|
|
}
|
|
return createVNode("div", {
|
|
class: classes.value,
|
|
style: containerStyle.value
|
|
}, extractedChildren, PatchFlags.STYLE | PatchFlags.CLASS);
|
|
}
|
|
return children.children;
|
|
};
|
|
}
|
|
});
|
|
|
|
//#endregion
|
|
export { Space as default, spaceProps };
|
|
//# sourceMappingURL=space.mjs.map
|