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 l, createElementBlock as a, openBlock as t, normalizeStyle as r, normalizeClass as s, Fragment as h, createElementVNode as n, renderSlot as d, createTextVNode as $, toDisplayString as g, createCommentVNode as i, 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(b) {
const e = b, v = [
"pink",
"red",
"yellow",
"orange",
"cyan",
"green",
"blue",
"purple",
"geekblue",
"magenta",
"volcano",
"gold",
"lime"
], f = N(["default", "value"]), c = l(() => {
if (e.color && !v.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
};
}), m = l(() => {
if (e.color && v.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}`;
}), u = l(() => e.value !== void 0 || e.dot || !e.color && !e.status ? f.default : !1), w = l(() => !e.color && !e.status ? f.value : !1), k = l(() => !!(e.value !== void 0 && e.value !== 0 || e.showZero && e.value === 0 || e.dot)), z = l(() => e.value === void 0 || e.value === 0 && !e.showZero || e.dot), p = l(() => e.offset?.length ? {
right: y(e.offset[0]) ? -e.offset[0] + "px" : C(e.offset[0]),
marginTop: y(e.offset[1]) ? e.offset[1] + "px" : e.offset[1]
} : {});
function y(o) {
return typeof o == "number";
}
function C(o) {
return o.includes("-") ? o.replace("-", "") : `-${o}`;
}
return (o, O) => (t(), a("div", {
class: s(["badge-wrap", { "badge-status-color": o.value === void 0 && (o.color || o.status) }]),
style: r([`--badge-z-index: ${o.zIndex}`, o.value === void 0 && !o.dot ? p.value : null])
}, [
o.value === void 0 && !o.dot && (o.color || o.status) ? (t(), a(h, { key: 0 }, [
n("span", {
class: s(["status-dot", [m.value, { "dot-ripple": o.ripple }]]),
style: r(c.value)
}, null, 6),
n("span", V, [
d(o.$slots, "default", {}, () => [
$(g(o.text), 1)
], !0)
])
], 64)) : (t(), a(h, { key: 1 }, [
u.value ? d(o.$slots, "default", { key: 0 }, void 0, !0) : i("", !0),
w.value ? (t(), a("span", {
key: 1,
class: s(["value", { "only-number": !u.value }])
}, [
d(o.$slots, "value", {}, void 0, !0)
], 2)) : (t(), 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(() => [
k.value ? (t(), a("div", {
key: 0,
class: s(["badge-value", [
{
"small-num": typeof o.value == "number" && o.value < 10,
"only-number": !u.value,
"only-dot": z.value
},
m.value
]]),
style: r([c.value, p.value, o.valueStyle]),
title: o.title || (o.value !== void 0 ? String(o.value) : "")
}, [
o.dot ? i("", !0) : (t(), a("span", D, [
n("span", I, g(typeof o.value == "number" && o.value > o.max ? o.max + "+" : o.value), 1)
]))
], 14, T)) : i("", !0)
]),
_: 1
}))
], 64))
], 6));
}
});
export {
q as default
};