import { defineComponent as u, useCssModule as g, computed as l, ref as m, watch as v, openBlock as b, createElementBlock as h, renderSlot as _, withDirectives as x, createElementVNode as r, normalizeStyle as w, normalizeClass as c, unref as i, toDisplayString as y, vShow as B } from "vue";
import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const D = {
  class: "stash-badge relative inline-block",
  "data-test": "stash-badge"
}, S = /* @__PURE__ */ u({
  name: "ll-badge",
  __name: "Badge",
  props: {
    animate: { type: Boolean, default: !1 },
    color: { default: "red" },
    content: { default: void 0 },
    isDisabled: { type: Boolean, default: !1 },
    max: { default: 99 },
    offset: { default: () => ({
      top: void 0,
      right: void 0
    }) },
    position: { default: "top-right" },
    showZero: { type: Boolean, default: !1 },
    variant: { default: "standard" }
  },
  setup(p) {
    const o = g(), t = p, s = l(() => {
      const e = parseInt(t.content, 10), a = parseInt(t.max, 10);
      return e != t.content || a != t.max ? t.content : e > a ? `${a}+` : e;
    }), d = (e) => e === 0 ? "0" : `${e}px`, f = l(() => ({
      top: t.offset.top !== void 0 ? d(t.offset.top) : void 0,
      right: t.offset.right !== void 0 ? d(t.offset.right) : void 0
    })), n = m(!1);
    return v(
      () => t.content,
      (e, a) => {
        t.animate && a !== e && (n.value = !0, setTimeout(() => {
          n.value = !1;
        }, 1e3));
      }
    ), (e, a) => (b(), h("span", D, [
      _(e.$slots, "default"),
      x(r("span", {
        "data-test": "stash-badge|content-wrapper",
        class: c([
          {
            [i(o)["top-right"]]: t.position === "top-right" && t.variant !== "dot",
            absolute: t.variant === "dot" || t.position === "top-right",
            "ml-1.5": t.position === "inline"
          }
        ]),
        style: w(t.variant === "dot" || t.position === "top-right" ? f.value : "")
      }, [
        r("span", {
          "data-test": "stash-badge|content",
          class: c(["inline-block whitespace-nowrap rounded-full text-center text-[10px] font-semibold leading-3.5 text-white", [
            {
              "animate-grow": n.value,
              "bg-red-500": t.color === "red" && !t.isDisabled,
              "bg-blue-500": t.color === "blue" && !t.isDisabled,
              absolute: t.variant === "dot",
              "bg-ice-200 text-white": t.isDisabled,
              [i(o)["badge-dot"]]: t.variant === "dot",
              [i(o)["badge-standard"]]: t.variant === "standard",
              "px-1.5": t.variant !== "dot"
            }
          ]])
        }, y(t.variant === "dot" ? null : s.value), 3)
      ], 6), [
        [B, t.variant === "dot" || s.value || s.value === 0 && t.showZero]
      ])
    ]));
  }
}), k = {
  "badge-standard": "_badge-standard_rAFOR",
  "badge-dot": "_badge-dot_IbnEz",
  "top-right": "_top-right_Cv3a-"
}, M = {
  $style: k
}, E = /* @__PURE__ */ C(S, [["__cssModules", M]]);
export {
  E as default
};
//# sourceMappingURL=Badge.js.map
