import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
import "./styles/col.css";
import { capitalize, computed } from "vue";
import { 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 breakpointProps = (() => {
  return breakpoints.reduce((props, val) => {
    props[val] = {
      type: [Boolean, String, Number],
      default: false
    };
    return props;
  }, {});
})();
const offsetProps = (() => {
  return breakpoints.reduce((props, val) => {
    props[`offset${capitalize(val)}`] = {
      type: [String, Number],
      default: null
    };
    return props;
  }, {});
})();
const orderProps = (() => {
  return breakpoints.reduce((props, val) => {
    props[`order${capitalize(val)}`] = {
      type: [String, Number],
      default: null
    };
    return props;
  }, {});
})();
const propMap = {
  col: Object.keys(breakpointProps),
  offset: Object.keys(offsetProps),
  order: Object.keys(orderProps)
};
function breakpointClass(type, prop, val) {
  let className = type;
  if (val == null || val === false) {
    return void 0;
  }
  if (prop) {
    const breakpoint = prop.replace(type, "");
    className += `-${breakpoint}`;
  }
  if (type === "col" && (val === "" || val === true)) {
    return `ve-${className}`.toLowerCase();
  }
  className += `-${val}`;
  return `ve-col--${className}`.toLowerCase();
}
const makeColProps = propsFactory({
  cols: {
    type: [Boolean, String, Number],
    default: false
  },
  ...breakpointProps,
  offset: {
    type: [String, Number],
    default: null
  },
  ...offsetProps,
  order: {
    type: [String, Number],
    default: null
  },
  ...orderProps,
  alignSelf: {
    type: String,
    default: null,
    validator: (str) => ["auto", "start", "end", "center", "baseline", "stretch"].includes(str)
  }
}, "col");
const Col = defineComponent({
  name: "VeCol",
  props: {
    ...makeTagProps(),
    ...makeColProps()
  },
  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);
        });
      }
      const hasColClasses = classList.some((className) => className.startsWith("ve-col-") && !className.startsWith("ve-col--"));
      classList.push({
        "ve-col": !hasColClasses || !props.cols,
        [`ve-col-${props.cols}`]: props.cols,
        [`ve-col--offset-${props.offset}`]: props.offset,
        [`ve-col--order-${props.order}`]: props.order,
        [`ve-col--align-self-${props.alignSelf}`]: props.alignSelf
      });
      return classList;
    });
    return () => _createVNode(props.tag, {
      "class": classes.value
    }, _isSlot(slots) ? slots : {
      default: () => [slots]
    });
  }
});
export {
  Col,
  makeColProps
};
//# sourceMappingURL=col.mjs.map
