@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
94 lines (93 loc) • 3.19 kB
JavaScript
import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
import { useTheme as C } from "../../composables/useTheme.js";
import { useCommon as d } from "../../composables/useCommon.js";
import { useColors as k } from "../../composables/useColors.js";
const N = { class: "relative inline-block" }, X = {
key: 0,
class: "animate-ping opacity-75 absolute top-0 left-0 rounded-full h-full w-full z-10 bg-[color:var(--x-badge-bg)]"
}, x = ["left", "right"], Y = ["top", "bottom"], $ = {
...d.props(),
...k.props("primary"),
tag: {
type: String,
default: "div"
},
position: {
type: String,
default: "top"
},
align: {
type: String,
default: "right"
},
offsetX: [Number, String],
offsetY: [Number, String],
animated: Boolean,
outlined: Boolean,
icon: String,
show: {
type: Boolean,
default: !0
}
}, E = {
name: "XBadge",
validators: {
...d.validators(),
position: Y,
align: x
}
}, D = /* @__PURE__ */ v({
...E,
props: $,
setup(m) {
const t = m, u = z(), g = l(() => {
const e = [];
return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), u.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
}), c = l(() => {
const e = {};
return t.offsetX && (e[t.align === "left" ? "marginLeft" : "marginRight"] = t.offsetX + "px"), t.offsetY && (e[t.position === "top" ? "marginTop" : "marginBottom"] = t.offsetY + "px"), e;
}), { styles: h, classes: b, className: y } = C("Badge", {}, t);
return (e, P) => (o(), S(B(e.tag), {
style: n(s(h)),
class: i([
s(y),
s(b).wrapper
])
}, {
default: w(() => [
r("div", N, [
a(e.$slots, "default"),
e.show ? (o(), p("div", {
key: 0,
class: i(["absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]", [
g.value,
{
"border-2 border-secondary-50 dark:border-secondary-900": e.outlined
}
]]),
style: n(c.value)
}, [
e.animated ? (o(), p("div", X)) : f("", !0),
r("div", {
class: i(["text-xs text-white overflow-hidden", [
e.$slots.content ? "flex items-center justify-center min-w-[1.25rem] h-5 px-1.5" : {
"p-1": e.size === "xs",
"p-[0.312rem]": e.size === "sm",
"p-1.5": !e.size || !["xs", "sm", "lg", "xl"].includes(e.size),
"p-2": e.size === "lg",
"p-2.5": e.size === "xl"
}
]])
}, [
a(e.$slots, "content")
], 2)
], 6)) : f("", !0)
])
]),
_: 3
}, 8, ["style", "class"]));
}
});
export {
D as default
};