vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
120 lines (119 loc) • 4.61 kB
JavaScript
import { defineComponent as S, computed as o, createElementBlock as u, openBlock as a, normalizeStyle as r, normalizeClass as s, Fragment as b, createElementVNode as d, renderSlot as i, createTextVNode as $, toDisplayString as w, createCommentVNode as v, createBlock as B, Transition as Z, withCtx as E } from "vue";
import { useSlotsExist as N } from "../utils/index.js";
const V = { class: "status-text" }, T = ["title"], D = {
key: 0,
class: "number-value",
style: { transition: "none 0s ease 0s" }
}, I = { class: "number" }, q = /* @__PURE__ */ S({
__name: "Badge",
props: {
color: { default: void 0 },
value: { default: void 0 },
max: { default: 99 },
showZero: { type: Boolean, default: !1 },
dot: { type: Boolean, default: !1 },
offset: { default: void 0 },
status: { default: void 0 },
text: { default: void 0 },
valueStyle: { default: () => ({}) },
zIndex: { default: 9 },
title: { default: void 0 },
ripple: { type: Boolean, default: !1 }
},
setup(t) {
const e = t, c = [
"pink",
"red",
"yellow",
"orange",
"cyan",
"green",
"blue",
"purple",
"geekblue",
"magenta",
"volcano",
"gold",
"lime"
], f = N(["default", "value"]), m = o(() => {
if (e.color && !c.includes(e.color))
return e.value !== void 0 && e.value !== 0 || e.showZero && e.value === 0 ? {
backgroundColor: e.color
} : {
color: e.color,
backgroundColor: e.color
};
}), y = o(() => {
if (e.color && c.includes(e.color))
return e.value !== void 0 && e.value !== 0 || e.showZero && e.value === 0 ? `color-${e.color} white` : `color-${e.color}`;
if (e.status)
return e.value !== void 0 && e.value !== 0 || e.showZero && e.value === 0 ? `status-${e.status} white` : `status-${e.status}`;
}), n = o(() => e.value !== void 0 || e.dot || !e.color && !e.status ? f.default : !1), k = o(() => !e.color && !e.status ? f.value : !1), x = o(() => !!(e.value !== void 0 && e.value !== 0 || e.showZero && e.value === 0 || e.dot)), z = o(() => e.value === void 0 || e.value === 0 && !e.showZero || e.dot), h = o(() => e.offset?.length ? {
right: g(e.offset[0]) ? -e.offset[0] + "px" : C(e.offset[0]),
marginTop: g(e.offset[1]) ? e.offset[1] + "px" : e.offset[1]
} : {});
function g(l) {
return typeof l == "number";
}
function C(l) {
return l.includes("-") ? l.replace("-", "") : `-${l}`;
}
return (l, O) => (a(), u("div", {
class: s(["badge-wrap", { "badge-status-color": t.value === void 0 && (t.color || t.status) }]),
style: r([`--badge-z-index: ${t.zIndex}`, t.value === void 0 && !t.dot ? h.value : null])
}, [
t.value === void 0 && !t.dot && (t.color || t.status) ? (a(), u(b, { key: 0 }, [
d("span", {
class: s(["status-dot", [y.value, { "dot-ripple": t.ripple }]]),
style: r(m.value)
}, null, 6),
d("span", V, [
i(l.$slots, "default", {}, () => [
$(w(t.text), 1)
], !0)
])
], 64)) : (a(), u(b, { key: 1 }, [
n.value ? i(l.$slots, "default", { key: 0 }, void 0, !0) : v("", !0),
k.value ? (a(), u("span", {
key: 1,
class: s(["value", { "only-number": !n.value }])
}, [
i(l.$slots, "value", {}, void 0, !0)
], 2)) : (a(), B(Z, {
key: 2,
name: "zoom",
"enter-from-class": "zoom-enter",
"enter-active-class": "zoom-enter",
"enter-to-class": "zoom-enter",
"leave-from-class": "zoom-leave",
"leave-active-class": "zoom-leave",
"leave-to-class": "zoom-leave"
}, {
default: E(() => [
x.value ? (a(), u("div", {
key: 0,
class: s(["badge-value", [
{
"small-num": typeof t.value == "number" && t.value < 10,
"only-number": !n.value,
"only-dot": z.value
},
y.value
]]),
style: r([m.value, h.value, t.valueStyle]),
title: t.title || (t.value !== void 0 ? String(t.value) : "")
}, [
t.dot ? v("", !0) : (a(), u("span", D, [
d("span", I, w(typeof t.value == "number" && t.value > t.max ? t.max + "+" : t.value), 1)
]))
], 14, T)) : v("", !0)
]),
_: 1
}))
], 64))
], 6));
}
});
export {
q as default
};