t-fighting-design/es/badge/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as l, computed as s, openBlock as u, createElementBlock as m, normalizeStyle as p, unref as r, renderSlot as _, withDirectives as g, createElementVNode as b, normalizeClass as y, toDisplayString as $, vShow as h } from "vue";
import { Props as v } from "./index3.js";
import { isNumber as c } from "../../_utils/index3.js";
const S = l({
  name: "FBadge"
}), C = /* @__PURE__ */ l({
  ...S,
  props: v,
  setup(d) {
    const n = d, i = s(() => {
      const { type: e, dot: t } = n;
      return [
        "f-badge__content",
        {
          [`f-badge__${e}`]: e,
          "f-badge__dot": t
        }
      ];
    }), a = s(() => {
      const { dot: e, max: t, value: o } = n;
      return e ? "" : c(t) && c(o) ? t > o ? `${o}` : `${t}+` : `${o}`;
    }), f = s(() => {
      const { color: e, textColor: t } = n;
      return {
        "--f-badge-background": e,
        "--f-badge-text-color": t
      };
    });
    return (e, t) => (u(), m("div", {
      class: "f-badge",
      style: p(r(f))
    }, [
      _(e.$slots, "default"),
      g(b("sup", {
        class: y(r(i))
      }, $(r(a)), 3), [
        [h, !e.show && (r(a) || e.dot)]
      ])
    ], 4));
  }
});
export {
  C as default
};