@arco-design/web-vue/es/space/space.js

Arco Design Vue 2.0: A Vue.js 3 UI Library

import { defineComponent, inject, computed, Comment, createVNode, Fragment } from "vue";
import { isArray, isNumber } from "../_utils/is.js";
import { getAllElements } from "../_utils/vue-utils.js";
import { getPrefixCls } from "../_utils/global-config.js";
import { configProviderInjectionKey } from "../config-provider/context.js";
var _Space = defineComponent({
  name: "Space",
  props: {
    align: {
      type: String
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    size: {
      type: [Number, String, Array],
      default: "small"
    },
    wrap: {
      type: Boolean
    },
    fill: {
      type: Boolean
    }
  },
  setup(props, {
    slots
  }) {
    const prefixCls = getPrefixCls("space");
    const configCtx = inject(configProviderInjectionKey, void 0);
    const rtl = computed(() => {
      var _a;
      return (_a = configCtx == null ? void 0 : configCtx.rtl) != null ? _a : false;
    });
    const mergedAlign = computed(() => {
      var _a;
      return (_a = props.align) != null ? _a : props.direction === "horizontal" ? "center" : "";
    });
    const cls = computed(() => [prefixCls, {
      [`${prefixCls}-${props.direction}`]: props.direction,
      [`${prefixCls}-align-${mergedAlign.value}`]: mergedAlign.value,
      [`${prefixCls}-wrap`]: props.wrap,
      [`${prefixCls}-fill`]: props.fill,
      [`${prefixCls}-rtl`]: rtl.value
    }]);
    function getSize(size) {
      if (isNumber(size)) {
        return size;
      }
      switch (size) {
        case "mini":
          return 4;
        case "small":
          return 8;
        case "medium":
          return 16;
        case "large":
          return 24;
        default:
          return 8;
      }
    }
    const getSpaceStyle = computed(() => {
      const style = {};
      const sizeArray = isArray(props.size) ? props.size : [props.size, props.size];
      const [colGap, rowGap] = sizeArray.map(getSize);
      style.columnGap = `${colGap}px`;
      style.rowGap = `${rowGap}px`;
      return style;
    });
    return () => {
      var _a;
      const children = getAllElements((_a = slots.default) == null ? void 0 : _a.call(slots), true).filter((item) => item.type !== Comment);
      return createVNode("div", {
        "class": cls.value,
        "style": getSpaceStyle.value
      }, [children.map((child, index) => {
        var _a2, _b;
        const shouldRenderSplit = slots.split && index > 0;
        return createVNode(Fragment, {
          "key": (_a2 = child.key) != null ? _a2 : `item-${index}`
        }, [shouldRenderSplit && createVNode("div", {
          "class": `${prefixCls}-item-split`
        }, [(_b = slots.split) == null ? void 0 : _b.call(slots)]), createVNode("div", {
          "class": `${prefixCls}-item`
        }, [child])]);
      })]);
    };
  }
});
export { _Space as default };