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

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

"use strict";
var vue = require("vue");
var is = require("../_utils/is.js");
var vueUtils = require("../_utils/vue-utils.js");
var globalConfig = require("../_utils/global-config.js");
var context = require("../config-provider/context.js");
var _Space = vue.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 = globalConfig.getPrefixCls("space");
    const configCtx = vue.inject(context.configProviderInjectionKey, void 0);
    const rtl = vue.computed(() => {
      var _a;
      return (_a = configCtx == null ? void 0 : configCtx.rtl) != null ? _a : false;
    });
    const mergedAlign = vue.computed(() => {
      var _a;
      return (_a = props.align) != null ? _a : props.direction === "horizontal" ? "center" : "";
    });
    const cls = vue.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 (is.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 = vue.computed(() => {
      const style = {};
      const sizeArray = is.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 = vueUtils.getAllElements((_a = slots.default) == null ? void 0 : _a.call(slots), true).filter((item) => item.type !== vue.Comment);
      return vue.createVNode("div", {
        "class": cls.value,
        "style": getSpaceStyle.value
      }, [children.map((child, index) => {
        var _a2, _b;
        const shouldRenderSplit = slots.split && index > 0;
        return vue.createVNode(vue.Fragment, {
          "key": (_a2 = child.key) != null ? _a2 : `item-${index}`
        }, [shouldRenderSplit && vue.createVNode("div", {
          "class": `${prefixCls}-item-split`
        }, [(_b = slots.split) == null ? void 0 : _b.call(slots)]), vue.createVNode("div", {
          "class": `${prefixCls}-item`
        }, [child])]);
      })]);
    };
  }
});
module.exports = _Space;