@extclp/vexip-ui/es/components/tag/tag.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as v, computed as u, createVNode as l, mergeProps as y, renderSlot as f } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import { useProps as h, createSizeProp as P, useNameHelper as B, useIcons as S, emitEvent as w } from "@vexip-ui/config";
import { isClient as z, parseColorToRgba as p, mixColor as k, adjustAlpha as T } from "@vexip-ui/utils";
import { tagProps as N } from "./props.mjs";
import d from "../icon/icon.mjs";
import a from "../renderer/renderer.mjs";
const j = Object.freeze(["default", "primary", "info", "success", "error", "warning", "lime", "pink", "magenta", "tomato", "orange", "cyan", "navy", "gold", "purple"]), D = /* @__PURE__ */ v({
  name: "Tag",
  components: {
    Icon: d
  },
  props: N,
  emits: [],
  setup(m, {
    slots: s
  }) {
    const e = h("tag", m, {
      size: P(),
      type: {
        default: "default",
        validator: (r) => j.includes(r)
      },
      border: !1,
      closable: !1,
      color: null,
      simple: !1,
      circle: !1,
      prefix: "",
      prefixBg: "",
      prefixColor: "",
      suffix: "",
      suffixBg: "",
      suffixColor: "",
      disabled: !1,
      slots: () => ({})
    }), o = B("tag"), b = S(), x = u(() => ({
      [o.b()]: !0,
      [o.bs("vars")]: !0,
      [o.bm("inherit")]: e.inherit,
      [o.bm(e.size)]: e.size !== "default",
      [o.bm(e.type)]: e.type !== "default",
      [o.bm("border")]: e.border,
      [o.bm("simple")]: e.simple,
      [o.bm("circle")]: e.circle,
      [o.bm("closable")]: e.closable,
      [o.bm("disabled")]: e.disabled
    })), g = u(() => {
      if (!e.color) return;
      const r = z ? getComputedStyle(document.documentElement) : null, t = p((r == null ? void 0 : r.getPropertyValue(o.nv("color-white"))) || "#fff"), n = p(e.color), i = n.toString();
      return o.cvm({
        color: "var(--vxp-color-white)",
        "bg-color": i,
        "b-color": i,
        "close-color": "var(--vxp-color-white)",
        "d-color": k(t, n, 0.3).toString(),
        ...e.simple || e.border ? {
          color: i,
          "close-color": i
        } : {},
        ...e.simple ? {
          "bg-color": T(n, 0.2).toString()
        } : {}
      });
    });
    function C(r) {
      if (!e.closable || e.disabled || r.button > 0)
        return !1;
      r.stopPropagation(), w(e.onClose);
    }
    function c() {
      return e.closable ? l("button", {
        type: "button",
        class: o.be("close"),
        onClick: C
      }, [l(d, y(b.value.close, {
        label: "close"
      }), null)]) : null;
    }
    return () => {
      const r = !!(e.prefix === 0 || e.prefix || s.prefix || e.slots.prefix), t = !!(e.suffix === 0 || e.suffix || s.suffix || e.slots.suffix);
      return l("div", {
        class: x.value,
        style: g.value
      }, [r ? l("span", {
        class: [o.be("unit"), o.be("prefix")],
        style: {
          color: e.prefixColor,
          backgroundColor: e.prefixBg,
          borderColor: e.prefixBg
        }
      }, [f(s, "prefix", void 0, () => [l(a, {
        renderer: e.slots.prefix
      }, {
        default: () => [e.prefix]
      })])]) : null, l("span", {
        class: [o.be("unit"), o.be("content")]
      }, [f(s, "default", void 0, () => [l(a, {
        renderer: e.slots.default
      }, null)]), !t && c()]), t ? l("span", {
        class: [o.be("unit"), o.be("suffix")],
        style: {
          color: e.suffixColor,
          backgroundColor: e.suffixBg,
          borderColor: e.suffixBg
        }
      }, [f(s, "suffix", void 0, () => [l(a, {
        renderer: e.slots.suffix
      }, {
        default: () => [e.suffix]
      })]), c()]) : null]);
    };
  }
});
export {
  D as default
};
//# sourceMappingURL=tag.mjs.map