import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
import "./styles/divider.css";
import { computed } from "vue";
import { convertToUnit } from "@veno-ui/utils";
import { genericComponent } from "../../utils";
import { makeTagProps } from "../../composables/tag";
const VeDividerTextAligns = ["left", "center", "right"];
const Divider = genericComponent()({
  name: "VeDivider",
  props: {
    textAlign: {
      type: String,
      default: "center",
      validator: (val) => VeDividerTextAligns.includes(val)
    },
    length: [Number, String],
    dashed: Boolean,
    vertical: Boolean,
    ...makeTagProps({
      tag: "hr"
    })
  },
  setup(props, {
    attrs,
    slots
  }) {
    const dividerStyles = computed(() => {
      const styles = {};
      if (props.length) {
        styles[props.vertical ? "maxHeight" : "maxWidth"] = convertToUnit(props.length);
      }
      return styles;
    });
    return () => {
      const hasDefaultSlot = !!slots.default;
      const Tag = hasDefaultSlot ? "div" : props.tag;
      const role = attrs.role ?? "separator";
      return _createVNode(Tag, {
        "class": ["ve-divider", {
          "ve-divider--dashed": props.dashed,
          "ve-divider--vertical": props.vertical,
          "ve-divider--text": hasDefaultSlot,
          "ve-divider--text-left": props.textAlign === "left",
          "ve-divider--text-right": props.textAlign === "right"
        }],
        "style": [dividerStyles.value],
        "aria-orientation": role === "separator" ? props.vertical ? "vertical" : "horizontal" : void 0,
        "role": role
      }, {
        default: hasDefaultSlot ? () => [_createVNode(_Fragment, null, [_createVNode("div", {
          "class": "ve-divider__line"
        }, null), _createVNode("div", {
          "class": "ve-divider__wrap"
        }, [slots.default?.()]), _createVNode("div", {
          "class": "ve-divider__line"
        }, null)])] : void 0
      });
    };
  }
});
export {
  Divider
};
//# sourceMappingURL=divider.mjs.map
