vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
225 lines (224 loc) • 7.67 kB
JavaScript
import { defineComponent as N, ref as c, computed as m, watchEffect as P, nextTick as B, createElementBlock as r, createBlock as D, openBlock as s, normalizeStyle as q, normalizeClass as g, createCommentVNode as i, createElementVNode as n, renderSlot as y, createTextVNode as k, toDisplayString as w, unref as K, mergeProps as j, withCtx as F, withDirectives as U, Fragment as W, renderList as G, vModelText as J } from "vue";
import O from "../space/index.js";
import { useSlotsExist as Q } from "../utils/index.js";
const X = {
key: 0,
class: "tag-icon"
}, Y = { class: "tag-label" }, Z = { class: "tag-label" }, x = ["onClick"], oe = /* @__PURE__ */ N({
__name: "Tag",
props: {
closable: { type: Boolean, default: !1 },
color: { default: void 0 },
icon: { default: void 0 },
size: { default: "middle" },
bordered: { type: Boolean, default: !0 },
dynamic: { type: Boolean, default: !1 },
spaceProps: { default: () => ({}) },
value: { default: () => [] }
},
emits: ["update:value", "close", "dynamicClose"],
setup(L, { emit: V }) {
const a = L, v = c(), d = c(!1), p = c(""), t = [
"success",
"processing",
"error",
"warning",
"default",
"pink",
"red",
"yellow",
"orange",
"cyan",
"green",
"blue",
"purple",
"geekblue",
"magenta",
"volcano",
"gold",
"lime"
], C = c(!1), h = c(), b = c(Array(a.value.length).fill(1)), A = Q(["icon"]), f = V, $ = m(() => {
if (a.dynamic && a.value.length) {
if (typeof a.value[0] == "string")
return !0;
if (typeof a.value[0] == "object")
return !1;
}
return null;
}), E = m(() => a.dynamic && a.value.length ? $.value ? a.value.map((e) => ({
label: e,
closable: !0
})) : a.value.map((e) => ({
closable: !0,
...e
})) : []), I = m(() => a.dynamic ? !1 : A.icon || a.icon);
P(() => {
if (a.dynamic) {
const e = a.value.length;
b.value = Array(e).fill(1), B(() => {
if (h.value)
for (let o = 0; o < e; o++)
b.value[o] = h.value[o].offsetWidth;
});
}
});
function S(e) {
C.value = !0, f("close", e);
}
function T(e, o) {
const l = a.value.filter((u, z) => z !== o);
f("update:value", l), f("dynamicClose", e, o);
}
async function M() {
d.value = !0, await B(), v.value.focus();
}
function R() {
$.value ? f("update:value", [...a.value, p.value]) : f("update:value", [
...a.value,
{
label: p.value
}
]), d.value = !1, v.value = "";
}
function H(e) {
e.key === "Enter" && v.value.blur();
}
return (e, o) => e.dynamic ? (s(), D(K(O), j({
key: 1,
gap: "small"
}, e.spaceProps), {
default: F(() => [
(s(!0), r(W, null, G(E.value, (l, u) => (s(), r("div", {
class: g(["tag-wrap", [
`tag-${l.size || e.size}`,
(l.color || e.color) && t.includes(l.color || e.color) ? `tag-${l.color || e.color}` : "",
{
"tag-borderless": l.bordered !== void 0 && !l.bordered,
"tag-has-color": (l.color || e.color) && !t.includes(l.color || e.color)
}
]]),
style: q(`background-color: ${(l.color || e.color) && !t.includes(l.color || e.color) ? l.color || e.color : ""};`),
key: u
}, [
b.value[u] ? (s(), r("span", {
key: 0,
ref_for: !0,
ref_key: "tagsIconRef",
ref: h,
class: "tag-icon"
}, [
y(e.$slots, "icon", {
item: l,
icon: e.icon,
index: u
}, () => [
k(w(l.icon), 1)
], !0)
], 512)) : i("", !0),
n("span", Z, [
y(e.$slots, "label", {
item: l,
label: l.label,
index: u
}, () => [
k(w(l.label), 1)
], !0)
]),
l.closable || e.closable ? (s(), r("span", {
key: 1,
class: "tag-close",
onClick: (z) => T(l, u)
}, [...o[3] || (o[3] = [
n("svg", {
focusable: "false",
class: "close-svg",
"data-icon": "close",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
n("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })
], -1)
])], 8, x)) : i("", !0)
], 6))), 128)),
d.value ? i("", !0) : (s(), r("div", {
key: 0,
class: g(["tag-wrap", [`tag-${e.size}`, { "tag-plus": e.dynamic }]]),
onClick: M
}, [...o[4] || (o[4] = [
n("svg", {
focusable: "false",
class: "plus-svg",
"data-icon": "plus",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
n("path", { d: "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" }),
n("path", { d: "M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" })
], -1)
])], 2)),
d.value ? U((s(), r("input", {
key: 1,
ref_key: "inputRef",
ref: v,
class: g(["tag-input", `input-${e.size}`]),
type: "text",
"onUpdate:modelValue": o[0] || (o[0] = (l) => p.value = l),
onBlur: o[1] || (o[1] = (l) => d.value = !1),
onChange: R,
onKeydown: H
}, null, 34)), [
[J, p.value]
]) : i("", !0)
]),
_: 3
}, 16)) : (s(), r("div", {
key: 0,
class: g(["tag-wrap", [
`tag-${e.size}`,
e.color && t.includes(e.color) ? `tag-${e.color}` : "",
{
"tag-borderless": !e.bordered,
"tag-has-color": e.color && !t.includes(e.color),
"tag-hidden": C.value
}
]]),
style: q(`background-color: ${e.color && !t.includes(e.color) ? e.color : ""};`)
}, [
I.value ? (s(), r("span", X, [
y(e.$slots, "icon", {}, () => [
k(w(e.icon), 1)
], !0)
])) : i("", !0),
n("span", Y, [
y(e.$slots, "default", {}, void 0, !0)
]),
e.closable ? (s(), r("span", {
key: 1,
class: "tag-close",
onClick: S
}, [...o[2] || (o[2] = [
n("svg", {
focusable: "false",
class: "close-svg",
"data-icon": "close",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
n("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })
], -1)
])])) : i("", !0)
], 6));
}
});
export {
oe as default
};