import { toRef, computed, createVNode, mergeProps, withDirectives, vShow } from "vue";
import "./styles/badge.scss";
import { makeShapeProps, useShape } from "../../composables/shape/index.mjs";
import { makeTagProps } from "../../composables/tag/index.mjs";
import { makeTransitionProps, MaybeTransition } from "../../composables/transition/index.mjs";
import { useBackgroundColor, useTextColor } from "../../composables/color/index.mjs";
import { FadeTransition } from "../transition/fade-transition.mjs";
import { Icon } from "../icon/icon.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
import { pick, convertToUnit } from "../../utils/dist/index.mjs";
const Badge = defineComponent({
  name: "VeBadge",
  inheritAttrs: false,
  props: {
    bordered: {
      type: Boolean,
      default: true
    },
    color: String,
    content: [Number, String],
    dot: Boolean,
    floating: Boolean,
    icon: [String, Object],
    inline: Boolean,
    location: {
      type: String,
      default: "top-right",
      validator: (value) => {
        const [vertical, horizontal] = (value != null ? value : "").split("-");
        return ["top", "bottom"].includes(vertical) && ["left", "right"].includes(horizontal);
      }
    },
    max: [Number, String],
    modelValue: {
      type: Boolean,
      default: true
    },
    offsetX: [Number, String],
    offsetY: [Number, String],
    textColor: String,
    ...makeShapeProps(),
    ...makeTagProps(),
    ...makeTransitionProps({
      transition: {
        component: FadeTransition
      }
    })
  },
  setup(props, {
    slots,
    attrs
  }) {
    const {
      backgroundColorClasses,
      backgroundColorStyles
    } = useBackgroundColor(toRef(props, "color"));
    const {
      shapeClasses
    } = useShape(props);
    const {
      textColorClasses,
      textColorStyles
    } = useTextColor(toRef(props, "textColor"));
    const position = computed(() => props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12);
    function calculatePosition(offset) {
      return `calc(100% - ${convertToUnit(position.value + Number(offset != null ? offset : 0))})`;
    }
    const locationStyles = computed(() => {
      var _a;
      const [vertical, horizontal] = ((_a = props.location) != null ? _a : "").split("-");
      const styles = {
        bottom: "auto",
        left: "auto",
        right: "auto",
        top: "auto"
      };
      if (!props.inline) {
        styles[horizontal === "left" ? "right" : "left"] = calculatePosition(props.offsetX);
        styles[vertical === "top" ? "bottom" : "top"] = calculatePosition(props.offsetY);
      }
      return styles;
    });
    return () => {
      const value = Number(props.content);
      const content = !props.max || isNaN(value) ? props.content : value <= props.max ? value : `${props.max}+`;
      const [badgeAttrs, restAttrs] = pick(attrs, ["aria-atomic", "aria-label", "aria-live", "role", "title"]);
      return createVNode(props.tag, mergeProps({
        "class": ["ve-badge", {
          "ve-badge--bordered": props.bordered,
          "ve-badge--dot": props.dot,
          "ve-badge--floating": props.floating,
          "ve-badge--inline": props.inline
        }]
      }, restAttrs), {
        default: () => {
          var _a;
          return [(_a = slots.default) == null ? void 0 : _a.call(slots), createVNode(MaybeTransition, {
            "transition": props.transition
          }, {
            default: () => {
              var _a2, _b;
              return [withDirectives(createVNode("span", mergeProps({
                "class": ["ve-badge__content", backgroundColorClasses.value, shapeClasses.value, textColorClasses.value],
                "style": [backgroundColorStyles.value, locationStyles.value, textColorStyles.value],
                "aria-atomic": "true",
                "aria-label": "locale string here",
                "aria-live": "polite",
                "role": "status"
              }, badgeAttrs), [!props.dot && (((_b = (_a2 = slots.badge) == null ? void 0 : _a2.call(slots)) != null ? _b : props.icon) ? createVNode(Icon, {
                "icon": props.icon
              }, null) : content)]), [[vShow, props.modelValue]])];
            }
          })];
        }
      });
    };
  }
});
export {
  Badge
};
//# sourceMappingURL=badge.mjs.map
