space.mjs 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. import { isVNode, defineComponent, renderSlot, createVNode, createTextVNode } from 'vue';
  2. import SpaceItem from './item.mjs';
  3. import { useSpace } from './use-space.mjs';
  4. import { PatchFlags, isFragment, isValidElementNode } from '../../../utils/vue/vnode.mjs';
  5. import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
  6. import { isNumber } from '../../../utils/types.mjs';
  7. import { isString, isArray } from '@vue/shared';
  8. import { componentSizes } from '../../../constants/size.mjs';
  9. const spaceProps = buildProps({
  10. direction: {
  11. type: String,
  12. values: ["horizontal", "vertical"],
  13. default: "horizontal"
  14. },
  15. class: {
  16. type: definePropType([
  17. String,
  18. Object,
  19. Array
  20. ]),
  21. default: ""
  22. },
  23. style: {
  24. type: definePropType([String, Array, Object]),
  25. default: ""
  26. },
  27. alignment: {
  28. type: definePropType(String),
  29. default: "center"
  30. },
  31. prefixCls: {
  32. type: String
  33. },
  34. spacer: {
  35. type: definePropType([Object, String, Number, Array]),
  36. default: null,
  37. validator: (val) => isVNode(val) || isNumber(val) || isString(val)
  38. },
  39. wrap: Boolean,
  40. fill: Boolean,
  41. fillRatio: {
  42. type: Number,
  43. default: 100
  44. },
  45. size: {
  46. type: [String, Array, Number],
  47. values: componentSizes,
  48. validator: (val) => {
  49. return isNumber(val) || isArray(val) && val.length === 2 && val.every(isNumber);
  50. }
  51. }
  52. });
  53. const Space = defineComponent({
  54. name: "ElSpace",
  55. props: spaceProps,
  56. setup(props, { slots }) {
  57. const { classes, containerStyle, itemStyle } = useSpace(props);
  58. function extractChildren(children, parentKey = "", extractedChildren = []) {
  59. const { prefixCls } = props;
  60. children.forEach((child, loopKey) => {
  61. if (isFragment(child)) {
  62. if (isArray(child.children)) {
  63. child.children.forEach((nested, key) => {
  64. if (isFragment(nested) && isArray(nested.children)) {
  65. extractChildren(nested.children, `${parentKey + key}-`, extractedChildren);
  66. } else {
  67. extractedChildren.push(createVNode(SpaceItem, {
  68. style: itemStyle.value,
  69. prefixCls,
  70. key: `nested-${parentKey + key}`
  71. }, {
  72. default: () => [nested]
  73. }, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"]));
  74. }
  75. });
  76. }
  77. } else if (isValidElementNode(child)) {
  78. extractedChildren.push(createVNode(SpaceItem, {
  79. style: itemStyle.value,
  80. prefixCls,
  81. key: `LoopKey${parentKey + loopKey}`
  82. }, {
  83. default: () => [child]
  84. }, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"]));
  85. }
  86. });
  87. return extractedChildren;
  88. }
  89. return () => {
  90. var _a;
  91. const { spacer, direction } = props;
  92. const children = renderSlot(slots, "default", { key: 0 }, () => []);
  93. if (((_a = children.children) != null ? _a : []).length === 0)
  94. return null;
  95. if (isArray(children.children)) {
  96. let extractedChildren = extractChildren(children.children);
  97. if (spacer) {
  98. const len = extractedChildren.length - 1;
  99. extractedChildren = extractedChildren.reduce((acc, child, idx) => {
  100. const children2 = [...acc, child];
  101. if (idx !== len) {
  102. children2.push(createVNode("span", {
  103. style: [
  104. itemStyle.value,
  105. direction === "vertical" ? "width: 100%" : null
  106. ],
  107. key: idx
  108. }, [
  109. isVNode(spacer) ? spacer : createTextVNode(spacer, PatchFlags.TEXT)
  110. ], PatchFlags.STYLE));
  111. }
  112. return children2;
  113. }, []);
  114. }
  115. return createVNode("div", {
  116. class: classes.value,
  117. style: containerStyle.value
  118. }, extractedChildren, PatchFlags.STYLE | PatchFlags.CLASS);
  119. }
  120. return children.children;
  121. };
  122. }
  123. });
  124. export { Space as default, spaceProps };
  125. //# sourceMappingURL=space.mjs.map