Space.mjs 2.5 KB

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