'use strict';

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

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

var ARow = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ARow",
  inheritAttrs: false,
  props: props.rowProps(),
  setup(props, {
    slots,
    attrs
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject.default("row", props);
    const [wrapSSR, hashId] = index.useRowStyle(prefixCls);
    let token;
    const responsiveObserve = index$1.useResponsiveObserver();
    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 < size.responsiveArray.length; i++) {
          const breakpoint = size.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 = index$2.useFlexGapSupport();
    vue.onMounted(() => {
      token = responsiveObserve.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.value.unsubscribe(token);
    });
    const getGutter = vue.computed(() => {
      const results = [void 0, void 0];
      const {
        gutter = 0
      } = props;
      const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, void 0];
      normalizedGutter.forEach((g, index) => {
        if (typeof g === "object") {
          for (let i = 0; i < size.responsiveArray.length; i++) {
            const breakpoint = size.responsiveArray[i];
            if (screens.value[breakpoint] && g[breakpoint] !== void 0) {
              results[index] = g[breakpoint];
              break;
            }
          }
        } else {
          results[index] = g;
        }
      });
      return results;
    });
    context.useProvideRow({
      gutter: getGutter,
      supportFlexGap,
      wrap: vue.computed(() => props.wrap)
    });
    const classes = vue.computed(() => _class.classNames(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 = getGutter.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", {
        ...attrs,
        "class": classes.value,
        "style": {
          ...rowStyle.value,
          ...attrs.style
        }
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]));
    };
  }
});

exports.default = ARow;
//# sourceMappingURL=Row.cjs.map
