'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.cjs');
require('../../../hooks/index.cjs');
var index = require('../style/index.cjs');
var useConfigInject = require('../../config-provider/src/hooks/useConfigInject.cjs');
var props = require('./props.cjs');
var index$1 = require('../../../hooks/use-flex-gap-support/index.cjs');
var _class = require('../../../utils/dom/class.cjs');
var props$1 = require('../../../utils/vue/props.cjs');

const spaceSize = {
  small: 8,
  middle: 16,
  large: 24
};
function getNumberSize(size) {
  return typeof size === "string" ? spaceSize[size] : size || 0;
}
var ASpace = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ASpace",
  inheritAttrs: false,
  props: props.spaceProps(),
  slots: Object,
  setup(props, {
    slots,
    attrs
  }) {
    const {
      prefixCls,
      space,
      direction: directionConfig
    } = useConfigInject.default("space", props);
    const [wrapSSR, hashId] = index.default(prefixCls);
    const supportFlexGap = index$1.useFlexGapSupport();
    const size = vue.computed(() => {
      var _a, _b, _c;
      return (_c = (_b = props.size) != null ? _b : (_a = space == null ? void 0 : space.value) == null ? void 0 : _a.size) != null ? _c : "small";
    });
    const horizontalSize = vue.ref();
    const verticalSize = vue.ref();
    vue.watch(size, () => {
      [horizontalSize.value, verticalSize.value] = (Array.isArray(size.value) ? size.value : [size.value, size.value]).map((item) => getNumberSize(item));
    }, {
      immediate: true
    });
    const mergedAlign = vue.computed(() => props.align === void 0 && props.direction === "horizontal" ? "center" : props.align);
    const cn = vue.computed(() => {
      return _class.classNames(prefixCls.value, hashId.value, `${prefixCls.value}-${props.direction}`, {
        [`${prefixCls.value}-rtl`]: directionConfig.value === "rtl",
        [`${prefixCls.value}-align-${mergedAlign.value}`]: mergedAlign.value
      });
    });
    const marginDirection = vue.computed(() => directionConfig.value === "rtl" ? "marginLeft" : "marginRight");
    const style = vue.computed(() => {
      const gapStyle = {};
      if (supportFlexGap.value) {
        gapStyle.columnGap = `${horizontalSize.value}px`;
        gapStyle.rowGap = `${verticalSize.value}px`;
      }
      return {
        ...gapStyle,
        ...props.wrap && {
          flexWrap: "wrap",
          marginBottom: `${-verticalSize.value}px`
        }
      };
    });
    return () => {
      var _a, _b;
      const {
        wrap,
        direction = "horizontal"
      } = props;
      const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
      const items = props$1.filterEmpty(children);
      const len = items.length;
      if (len === 0)
        return null;
      const split = (_b = slots.split) == null ? void 0 : _b.call(slots);
      const itemClassName = `${prefixCls.value}-item`;
      const horizontalSizeVal = horizontalSize.value;
      const latestIndex = len - 1;
      return vue.createVNode("div", {
        ...attrs,
        "class": [cn.value, attrs.class],
        "style": [style.value, attrs.style]
      }, [items.map((child, index) => {
        let originIndex = children.indexOf(child);
        if (originIndex === -1)
          originIndex = `$$space-${index}`;
        let itemStyle = {};
        if (!supportFlexGap.value) {
          if (direction === "vertical") {
            if (index < latestIndex)
              itemStyle = {
                marginBottom: `${horizontalSizeVal / (split ? 2 : 1)}px`
              };
          } else {
            itemStyle = {
              ...index < latestIndex && {
                [marginDirection.value]: `${horizontalSizeVal / (split ? 2 : 1)}px`
              },
              ...wrap && {
                paddingBottom: `${verticalSize.value}px`
              }
            };
          }
        }
        return wrapSSR(vue.createVNode(vue.Fragment, {
          "key": originIndex
        }, [vue.createVNode("div", {
          "class": itemClassName,
          "style": itemStyle
        }, [child]), index < latestIndex && split && vue.createVNode("span", {
          "class": `${itemClassName}-split`,
          "style": itemStyle
        }, [split])]));
      })]);
    };
  }
});

exports.default = ASpace;
//# sourceMappingURL=Space.cjs.map
