import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
import "./styles/row.css";
import { capitalize, computed } from "vue";
import { convertToUnit, propsFactory } from "@veno-ui/utils";
import { defineComponent } from "../../utils";
import { makeTagProps } from "../../composables/tag";
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
}
const breakpoints = ["sm", "md", "lg", "xl", "xxl"];
const alignments = ["start", "end", "center"];
function makeProps(prefix, def) {
  return breakpoints.reduce((props, val) => {
    props[prefix + capitalize(val)] = def();
    return props;
  }, {});
}
const alignValidator = (str) => [...alignments, "baseline", "stretch"].includes(str);
const alignProps = makeProps("align", () => ({
  type: String,
  default: null,
  validator: alignValidator
}));
const justifyValidator = (str) => [...alignments, "space-between", "space-around"].includes(str);
const justifyProps = makeProps("justify", () => ({
  type: String,
  default: null,
  validator: justifyValidator
}));
const alignContentValidator = (str) => [...alignments, "space-between", "space-around", "stretch"].includes(str);
const alignContentProps = makeProps("alignContent", () => ({
  type: String,
  default: null,
  validator: alignContentValidator
}));
const propMap = {
  align: Object.keys(alignProps),
  justify: Object.keys(justifyProps),
  alignContent: Object.keys(alignContentProps)
};
const classMap = {
  align: "align",
  justify: "justify",
  alignContent: "align-content"
};
function breakpointClass(type, prop, val) {
  let className = classMap[type];
  if (val == null) {
    return void 0;
  }
  if (prop) {
    const breakpoint = prop.replace(type, "");
    className += `-${breakpoint}`;
  }
  className += `-${val}`;
  return className.toLowerCase();
}
const GUTTERS = ["xs", "sm", "md", "lg", "xl", "xxl", "x-small", "small", "medium", "large", "x-large", "xx-large"];
const GUTTERS_ALIASES = {
  "x-small": "xs",
  "small": "sm",
  "medium": "md",
  "large": "lg",
  "x-large": "xl",
  "xx-large": "xxl"
};
const makeRowProps = propsFactory({
  gutter: {
    type: [Number, String],
    default: "xl"
  },
  align: {
    type: String,
    default: null,
    validator: alignValidator
  },
  ...alignProps,
  justify: {
    type: String,
    default: null,
    validator: justifyValidator
  },
  ...justifyProps,
  alignContent: {
    type: String,
    default: null,
    validator: alignContentValidator
  },
  ...alignContentProps
}, "row");
const Row = defineComponent({
  name: "VeRow",
  props: {
    ...makeTagProps(),
    ...makeRowProps()
  },
  setup(props, {
    slots
  }) {
    const classes = computed(() => {
      const classList = [];
      let type;
      for (type in propMap) {
        propMap[type].forEach((prop) => {
          const value = props[prop];
          const className = breakpointClass(type, prop, value);
          if (className)
            classList.push(className);
        });
      }
      if (GUTTERS.includes(props.gutter)) {
        let gutter = props.gutter;
        if (props.gutter in GUTTERS_ALIASES) {
          gutter = GUTTERS_ALIASES[gutter];
        }
        classList.push(`ve-row--gutter-${gutter}`);
      }
      classList.push({
        [`ve-row--align-${props.align}`]: props.align,
        [`ve-row--justify-${props.justify}`]: props.justify,
        [`ve-row--align-content-${props.alignContent}`]: props.alignContent
      });
      return classList;
    });
    const styles = computed(() => {
      if (GUTTERS.includes(props.gutter))
        return {};
      return {
        "--ve-row-gutter": convertToUnit(props.gutter)
      };
    });
    return () => _createVNode(props.tag, {
      "class": ["ve-row", classes.value],
      "style": styles.value
    }, _isSlot(slots) ? slots : {
      default: () => [slots]
    });
  }
});
export {
  Row,
  makeRowProps
};
//# sourceMappingURL=row.mjs.map
