Space.mjs 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import { computed, Comment, defineComponent, Fragment, Text, createVNode as _createVNode } from "vue";
  2. import { createNamespace } from "../utils/index.mjs";
  3. const [name, bem] = createNamespace("space");
  4. const spaceProps = {
  5. align: String,
  6. direction: {
  7. type: String,
  8. default: "horizontal"
  9. },
  10. size: {
  11. type: [Number, String, Array],
  12. default: 8
  13. },
  14. wrap: Boolean,
  15. fill: Boolean
  16. };
  17. function filterEmpty(children = []) {
  18. const nodes = [];
  19. children.forEach((child) => {
  20. if (Array.isArray(child)) {
  21. nodes.push(...child);
  22. } else if (child.type === Fragment) {
  23. nodes.push(...filterEmpty(child.children));
  24. } else {
  25. nodes.push(child);
  26. }
  27. });
  28. return nodes.filter((c) => {
  29. var _a;
  30. return !(c && (c.type === Comment || c.type === Fragment && ((_a = c.children) == null ? void 0 : _a.length) === 0 || c.type === Text && c.children.trim() === ""));
  31. });
  32. }
  33. var stdin_default = defineComponent({
  34. name,
  35. props: spaceProps,
  36. setup(props, {
  37. slots
  38. }) {
  39. const mergedAlign = computed(() => {
  40. var _a;
  41. return (_a = props.align) != null ? _a : props.direction === "horizontal" ? "center" : "";
  42. });
  43. const getMargin = (size) => {
  44. if (typeof size === "number") {
  45. return size + "px";
  46. }
  47. return size;
  48. };
  49. const getMarginStyle = (isLast) => {
  50. const style = {};
  51. const marginRight = `${getMargin(Array.isArray(props.size) ? props.size[0] : props.size)}`;
  52. const marginBottom = `${getMargin(Array.isArray(props.size) ? props.size[1] : props.size)}`;
  53. if (isLast) {
  54. return props.wrap ? {
  55. marginBottom
  56. } : {};
  57. }
  58. if (props.direction === "horizontal") {
  59. style.marginRight = marginRight;
  60. }
  61. if (props.direction === "vertical" || props.wrap) {
  62. style.marginBottom = marginBottom;
  63. }
  64. return style;
  65. };
  66. return () => {
  67. var _a;
  68. const children = filterEmpty((_a = slots.default) == null ? void 0 : _a.call(slots));
  69. return _createVNode("div", {
  70. "class": [bem({
  71. [props.direction]: props.direction,
  72. [`align-${mergedAlign.value}`]: mergedAlign.value,
  73. wrap: props.wrap,
  74. fill: props.fill
  75. })]
  76. }, [children.map((c, i) => _createVNode("div", {
  77. "key": `item-${i}`,
  78. "class": `${name}-item`,
  79. "style": getMarginStyle(i === children.length - 1)
  80. }, [c]))]);
  81. };
  82. }
  83. });
  84. export {
  85. stdin_default as default,
  86. spaceProps
  87. };