space.js 4.2 KB

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