'use strict';

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

var vue = require('vue');
var classNames = require('../_util/classNames.js');
var responsiveObserve = require('../_util/responsiveObserve.js');
require('../hooks/index.js');
var type = require('../_util/type.js');
var index = require('./style/index.js');
var context = require('./context.js');
var useConfigInject = require('../config-provider/hooks/useConfigInject.js');
var useFlexGapSupport = require('../hooks/useFlexGapSupport.js');

const RowAligns = ["top", "middle", "bottom", "stretch"];
const RowJustify = ["start", "end", "center", "space-around", "space-between", "space-evenly"];
const rowProps = () => ({
  align: type.someType([String, Object]),
  justify: type.someType([String, Object]),
  prefixCls: String,
  gutter: type.someType([Number, Array, Object], 0),
  wrap: {
    type: Boolean,
    default: void 0
  }
});
const ARow = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ARow",
  inheritAttrs: false,
  props: rowProps(),
  setup(props, {
    slots,
    attrs
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject.default("row", props);
    const [wrapSSR, hashId] = index.useRowStyle(prefixCls);
    let token;
    const responsiveObserve$1 = responsiveObserve.default();
    const screens = vue.ref({
      xs: true,
      sm: true,
      md: true,
      lg: true,
      xl: true,
      xxl: true
    });
    const curScreens = vue.ref({
      xs: false,
      sm: false,
      md: false,
      lg: false,
      xl: false,
      xxl: false
    });
    const mergePropsByScreen = (oriProp) => {
      return vue.computed(() => {
        if (typeof props[oriProp] === "string")
          return props[oriProp];
        if (typeof props[oriProp] !== "object")
          return "";
        for (let i = 0; i < responsiveObserve.responsiveArray.length; i++) {
          const breakpoint = responsiveObserve.responsiveArray[i];
          if (!curScreens.value[breakpoint])
            continue;
          const curVal = props[oriProp][breakpoint];
          if (curVal !== void 0)
            return curVal;
        }
        return "";
      });
    };
    const mergeAlign = mergePropsByScreen("align");
    const mergeJustify = mergePropsByScreen("justify");
    const supportFlexGap = useFlexGapSupport.useFlexGapSupport();
    vue.onMounted(() => {
      token = responsiveObserve$1.value.subscribe((screen) => {
        curScreens.value = screen;
        const currentGutter = props.gutter || 0;
        if (!Array.isArray(currentGutter) && typeof currentGutter === "object" || Array.isArray(currentGutter) && (typeof currentGutter[0] === "object" || typeof currentGutter[1] === "object"))
          screens.value = screen;
      });
    });
    vue.onBeforeUnmount(() => {
      responsiveObserve$1.value.unsubscribe(token);
    });
    const gutter = vue.computed(() => {
      const results = [void 0, void 0];
      const {
        gutter: gutter2 = 0
      } = props;
      const normalizedGutter = Array.isArray(gutter2) ? gutter2 : [gutter2, void 0];
      normalizedGutter.forEach((g, index) => {
        if (typeof g === "object") {
          for (let i = 0; i < responsiveObserve.responsiveArray.length; i++) {
            const breakpoint = responsiveObserve.responsiveArray[i];
            if (screens.value[breakpoint] && g[breakpoint] !== void 0) {
              results[index] = g[breakpoint];
              break;
            }
          }
        } else {
          results[index] = g;
        }
      });
      return results;
    });
    context.useProvideRow({
      gutter,
      supportFlexGap,
      wrap: vue.computed(() => props.wrap)
    });
    const classes = vue.computed(() => classNames.default(prefixCls.value, {
      [`${prefixCls.value}-no-wrap`]: props.wrap === false,
      [`${prefixCls.value}-${mergeJustify.value}`]: mergeJustify.value,
      [`${prefixCls.value}-${mergeAlign.value}`]: mergeAlign.value,
      [`${prefixCls.value}-rtl`]: direction.value === "rtl"
    }, attrs.class, hashId.value));
    const rowStyle = vue.computed(() => {
      const gt = gutter.value;
      const style = {};
      const horizontalGutter = gt[0] != null && gt[0] > 0 ? `${gt[0] / -2}px` : void 0;
      const verticalGutter = gt[1] != null && gt[1] > 0 ? `${gt[1] / -2}px` : void 0;
      if (horizontalGutter) {
        style.marginLeft = horizontalGutter;
        style.marginRight = horizontalGutter;
      }
      if (supportFlexGap.value) {
        style.rowGap = `${gt[1]}px`;
      } else if (verticalGutter) {
        style.marginTop = verticalGutter;
        style.marginBottom = verticalGutter;
      }
      return style;
    });
    return () => {
      var _a;
      return wrapSSR(vue.createVNode("div", vue.mergeProps(attrs, {
        "class": classes.value,
        "style": {
          ...rowStyle.value,
          ...attrs.style
        }
      }), [(_a = slots.default) == null ? void 0 : _a.call(slots)]));
    };
  }
});

exports.default = ARow;
exports.rowProps = rowProps;
//# sourceMappingURL=Row.js.map
