birdpaper-ui/es/space/src/space.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

import { defineComponent, Comment, createVNode, Fragment } from "vue";
import { getAllElements } from "../../utils/dom.js";
import { isString } from "../../utils/util.js";
const _space = /* @__PURE__ */ defineComponent({
  name: "Space",
  props: {
    /** 间距大小 */
    size: {
      type: [Number, String],
      default: "normal"
    },
    /** 布局类型 */
    type: {
      type: String,
      default: "horizontal"
    },
    /** 水平对齐方式 */
    justify: {
      type: String,
      default: "flex-start"
    },
    /** 垂直对齐方式 */
    align: {
      type: String,
      default: "flex-start"
    }
  },
  setup(props, {
    slots
  }) {
    const typeMap = {
      mini: 4,
      small: 8,
      normal: 10,
      large: 24
    };
    const size = isString(props.size) ? typeMap[props.size] : props.size;
    const render = () => {
      var _a;
      const children = getAllElements((_a = slots.default) == null ? void 0 : _a.call(slots), true).filter((item) => item.type !== Comment);
      return createVNode("div", {
        "class": ["bp-space", `bp-space-${props.type}`],
        "style": `justify-content:${props.justify};align-items:${props.align}`
      }, [children.map((child, index) => {
        var _a2;
        const hasSplit = slots.split && index > 0;
        return createVNode(Fragment, {
          "key": child.key ?? `item-${index}`
        }, [hasSplit && createVNode("div", {
          "class": "bp-space-item",
          "style": props.type === "horizontal" ? `margin: 0 ${size}px` : `margin: ${size}px 0`
        }, [(_a2 = slots.split) == null ? void 0 : _a2.call(slots)]), createVNode("div", {
          "class": "bp-space-item",
          "style": props.type === "horizontal" ? `margin: 0 ${size}px` : `margin: ${size}px 0`
        }, [child])]);
      })]);
    };
    return render;
  }
});
export {
  _space as default
};