@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
80 lines (79 loc) • 2.77 kB
JavaScript
import { defineComponent as _, useSlots as y, computed as r, openBlock as C, createElementBlock as S, normalizeClass as c, renderSlot as i, createVNode as l, unref as n, Transition as x, withCtx as u, withDirectives as k, createElementVNode as D, normalizeStyle as N, createTextVNode as w, toDisplayString as B, vShow as z } from "vue";
import "../renderer/index.mjs";
import { useProps as E, useNameHelper as T, emitEvent as V } from "@vexip-ui/config";
import { badgeProps as $ } from "./props.mjs";
import { badgeTypes as P } from "./symbol.mjs";
import d from "../renderer/renderer.mjs";
const H = ["title"], K = /* @__PURE__ */ _({
name: "Badge",
__name: "badge",
props: $,
setup(m) {
const e = E("badge", m, {
content: {
default: null,
static: !0
},
max: 0,
disabled: !1,
isDot: !1,
type: {
default: "error",
validator: (o) => P.includes(o)
},
color: null,
slots: () => ({})
}), p = y(), t = T("badge"), a = r(() => !!p.default), f = r(() => ({
[t.b()]: !0,
[t.bs("vars")]: !0,
[t.bm("inherit")]: e.inherit,
[t.bm("not-wrapper")]: !a.value,
[t.bm("is-dot")]: e.isDot
})), s = r(() => e.isDot ? "" : typeof e.content == "number" && e.max > 0 && e.content > e.max ? `${e.max}+` : e.content), b = r(() => a.value ? t.bs("badge-zoom") : t.bs("zoom")), v = r(() => e.content || e.content === 0 ? e.content.toString() : void 0), g = r(() => !e.disabled && (e.content || e.content === 0 || e.isDot));
function h(o) {
V(e.onBadgeClick, o);
}
return (o, j) => (C(), S("div", {
class: c(f.value)
}, [
i(o.$slots, "default", {}, () => [
l(n(d), {
renderer: n(e).slots.default
}, null, 8, ["renderer"])
]),
l(x, { name: b.value }, {
default: u(() => [
k(D("sup", {
class: c({
[n(t).be("content")]: !0,
[n(t).bem("content", "fixed")]: a.value,
[n(t).bem("content", n(e).type)]: n(e).type !== "error"
}),
style: N({ backgroundColor: n(e).color }),
title: v.value,
onClick: h
}, [
i(o.$slots, "content", { content: s.value }, () => [
l(n(d), {
renderer: n(e).slots.content,
data: { content: s.value }
}, {
default: u(() => [
w(B(s.value), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 14, H), [
[z, g.value]
])
]),
_: 3
}, 8, ["name"])
], 2));
}
});
export {
K as default
};
//# sourceMappingURL=badge.vue2.mjs.map