@aplus-frontend/ui
Version:
49 lines (48 loc) • 1.93 kB
JavaScript
import { defineComponent as S, computed as n, createElementBlock as $, openBlock as b, normalizeClass as i, normalizeStyle as w, createElementVNode as B, toDisplayString as _ } from "vue";
import "../config-provider/index.mjs";
import { useGlobalConfig as z } from "../config-provider/hooks/use-global-config.mjs";
import { useNamespace as v } from "../config-provider/hooks/use-namespace.mjs";
const I = ["title"], N = /* @__PURE__ */ S({
name: "ApTag",
__name: "ap-tag",
props: {
type: { default: "purely" },
text: {},
color: { default: "#34B77C" },
size: { default: "middle" },
disabled: { type: Boolean, default: !1 },
fixedWidth: { type: Boolean, default: !1 }
},
setup(o) {
const e = o, l = z("uiMode"), { b: r, bm: a } = v("tag");
function p(t, s) {
t.length === 4 && (t = `#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`);
const m = parseInt(t.slice(1, 3), 16), f = parseInt(t.slice(3, 5), 16), g = parseInt(t.slice(5, 7), 16), y = Math.round(s * 255).toString(16).padStart(2, "0");
return `#${m.toString(16).padStart(2, "0")}${f.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${y}`;
}
const c = n(() => ({
"--tag-main-color": e.color,
"--tag-main-color-opacity": p(e.color, 0.06),
"--tag-main-color-background": p(e.color, 0.15)
})), d = n(() => [
r("wrapper"),
r(`wrapper-${e.type}`),
a("wrapper", e.size)
].filter(Boolean)), u = n(() => {
const t = [r("inner-wrapper"), a("inner-wrapper", e.size)];
return e.disabled && (l.value === "aplus" ? t.push(a("inner-wrapper", "disabled")) : t.push(a("inner-wrapper", "disabled-admin"))), t;
});
return (t, s) => (b(), $("span", {
style: w(c.value),
title: t.text,
class: i(d.value)
}, [
B("span", {
class: i(u.value)
}, _(t.text), 3)
], 14, I));
}
});
export {
N as default
};