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