@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
289 lines (288 loc) • 8.78 kB
JavaScript
import { withInstall as te } from "../common/index.esm.js";
import { ref as u, defineComponent as le, computed as B, watch as v, nextTick as ne, createVNode as d, mergeProps as se } from "vue";
const ue = {
activeTag: { type: String, default: "" },
addButtonText: { type: String, default: "" },
customClass: { type: String, default: "" },
customStyle: { type: String, default: "" },
data: { type: Array, default: [{ name: "示例1" }] },
enableAddButton: { type: Boolean, default: !1 },
selectable: { type: Boolean, default: !1 },
showAddButton: { type: Boolean, default: !1 },
showClose: { type: Boolean, default: !0 },
showColor: { type: Boolean, default: !1 },
tagType: { type: String, default: "" },
tagStyle: { type: String, default: "" },
wrapText: { type: Boolean, default: !1 },
draggable: { type: Boolean, default: !1 },
disable: { type: Boolean, default: !1 },
placeholder: { type: String, default: "" }
};
function oe(l, r, m, b) {
const n = u(-1), f = u(!1);
function C(o, s, g) {
l.disable || (o.stopPropagation(), s && setTimeout(() => {
n.value = g, f.value = !0, s.moving = !0;
}));
}
function w(o, s) {
if (f.value && (o.preventDefault(), n.value !== s)) {
const g = b.value[n.value], y = b.value;
y.splice(n.value, 1), y.splice(s, 0, g), n.value = s;
}
}
function k(o, s) {
f.value && (o.preventDefault(), o.dataTransfer && (o.dataTransfer.dropEffect = "move"));
}
function h(o, s) {
s && (s.moving = !1), m.value = b.value.filter((g) => g.type === "Tag").map((g) => g.payload), f.value = !1, r.emit("change", m.value);
}
return {
dragstart: C,
dragenter: w,
dragover: k,
dragend: h,
isDragging: f
};
}
const ce = /* @__PURE__ */ le({
name: "FTags",
props: ue,
emits: ["remove", "selectionChange", "change", "click"],
setup(l, r) {
const m = u(l.selectable), b = u(l.customClass), n = u(l.data), f = u(l.tagType), C = u(l.tagStyle), w = u(l.showColor), k = u(l.customStyle), h = u(l.activeTag), o = u(l.addButtonText), s = u(), g = u(l.wrapText), y = u();
u(l.disable);
const T = u(!1);
function p() {
const e = n.value.map((a) => ({
type: "Tag",
payload: a
}));
return l.showAddButton && e.push({
type: "AddButton"
}), e;
}
const c = u(p());
function S(e) {
n.value = e, c.value = p();
}
const x = B(() => c.value.findIndex((e) => e.type === "Input")), O = oe(l, r, n, c), {
dragstart: E,
dragenter: L,
dragover: j,
dragend: P
} = O;
v(() => l.data, (e) => S(e)), v(() => l.showAddButton, () => {
c.value = p();
}), v(() => l.disable, (e) => {
c.value = p();
}), v(() => l.activeTag, (e) => {
h.value = e;
}), v(() => l.tagType, (e) => {
f.value = e;
}), v(() => l.tagStyle, (e) => {
C.value = e;
}), v(() => l.wrapText, (e) => {
g.value = e;
}), v(() => l.addButtonText, (e) => {
o.value = e;
}), v(T, (e) => {
const a = [...c.value];
e ? a.length > 0 && a[a.length - 1].type !== "Input" && (a.splice(a.length - 1, 1), a.splice(a.length, 0, {
type: "Input"
}), c.value = a, ne(() => {
var t;
y.value && ((t = y.value) == null || t.focus());
})) : a.length > 0 && a[a.length - 1].type !== "AddButton" && (a.splice(a.length - 1, 1), a.splice(a.length, 0, {
type: "AddButton"
}), c.value = a);
});
const K = B(() => {
const e = {
"farris-tags": !0,
"farris-tags-checkable": m.value,
"farris-tags-nowrap": !g.value
};
return b.value.split(" ").reduce((a, t) => (a[t] = !0, a), e), e;
});
function M(e) {
const a = {
"farris-tag-item": !0,
"farris-tag-item-checked": m.value && e.checked,
"farris-tag-item-checkable": !h.value && !f.value && m.value,
"farris-tag-item-has-color": w.value,
"farris-tag-item-actived": h.value === e.name
};
if (f.value) {
const t = `farris-tag-item-${f.value}`;
a[t] = !0;
}
return a;
}
const N = B(() => {
const e = {
borderColor: "#E6E6E6"
};
return k.value && k.value.split(";").reduce((a, t) => {
const i = t.split(":");
return a[i[0]] = i[1], a;
}, e), e;
});
function R(e, a) {
!l.disable && m.value && (!a.hasOwnProperty("selectable") || a.selectable) && (a.checked = !a.checked, h.value = a.checked ? a.name : "", a.checked && n.value.filter((t) => t.name !== a.name).forEach((t) => {
t.checked = !a.checked;
}), r.emit("change", n.value), r.emit("selectionChange", a));
}
function F(e, a) {
if (l.disable)
return;
let t;
switch (e.key) {
case "Backspace":
n.value = n.value.filter((i) => i.name !== a.name), r.emit("change", n.value);
break;
case "ArrowLeft":
t = Math.max(s.value.scrollLeft + 20, 0), s.value.scrollLeft = t;
break;
case "ArrowRight":
t = Math.max(s.value.scrollLeft - 20, 0), s.value.scrollLeft = t;
}
}
function H(e, a) {
const t = n.value.findIndex((i) => i.name === a.name);
if (t > -1) {
const [i] = n.value.splice(t, 1);
c.value = p(), r.emit("change", n.value), r.emit("remove", {
tags: n.value,
remove: i
});
}
e.stopPropagation();
}
const V = B(() => ({
"farris-tag-item": !0,
"farris-tag-add-button": !0,
"farris-tag-add-button-disabled": !l.enableAddButton
}));
function W(e) {
l.enableAddButton && (e.stopPropagation(), T.value = !0);
}
function X() {
return !l.disable && d("li", {
class: V.value,
onClick: (e) => W(e)
}, [d("span", {
class: "f-icon f-icon-amplification"
}, null), o.value && d("span", {
class: "farris-tag-add-text"
}, [o.value])]);
}
function I(e, a, t) {
e > -1 && (n.value.splice(e, 0, {
name: a,
value: t,
selectable: m.value
}), c.value = p(), T.value = !1, r.emit("change", n.value));
}
function A(e) {
if (e && e.value) {
const a = e.value, t = x.value;
I(t, a, a), e.innerText = "";
} else
T.value = !1;
}
function q(e) {
const a = e.target;
a && a.value ? A(a) : T.value = !1;
}
function z(e) {
e.key === "Enter" && A(e.target);
}
function G() {
return !l.disable && d("li", {
class: "farris-tag-input-box"
}, [d("input", {
ref: y,
class: "form-control",
onKeyup: z,
onBlur: q
}, null)]);
}
function J(e, a) {
return d("li", {
class: M(e),
style: N.value,
tabindex: 0,
id: e.name,
key: e.name,
onClick: (t) => R(t, e),
onKeydown: (t) => F(t, e),
draggable: "false",
onDragstart: (t) => E(t, e, a),
onDragenter: (t) => L(t, a),
onDragend: (t) => P(t, e),
onDragover: (t) => j(t, a)
}, [d("span", {
title: e.name,
class: "tag-box"
}, [e.name]), !l.disable && l.showClose && d("span", {
class: "tag-delete"
}, [d("i", {
class: "f-icon f-icon-close",
onClick: (t) => H(t, e)
}, null)])]);
}
function Q() {
return c.value.map((e, a) => {
switch (e.type) {
case "Tag":
return J(e.payload, a);
case "AddButton":
return X();
case "Input":
return G();
}
});
}
const U = B(() => ({
"h-100": !0,
"farris-tags-item-container": !0,
"farris-tag-item-capsule": C.value === "capsule"
}));
function Y(e) {
const a = Math.max(s.value.scrollLeft - e.deltaX, 0);
s.value.scrollLeft = a;
}
function Z(e) {
var t;
e.preventDefault(), e.stopPropagation();
const a = (t = e.dataTransfer) == null ? void 0 : t.getData("Text");
if (a) {
const i = a.split(":"), ee = i[0], D = i[1];
[...n.value].findIndex((ae) => ae.value === D) > -1 || I(n.value.length, ee, D);
}
}
function _(e) {
e.preventDefault();
}
function $() {
r.emit("click");
}
return () => d("div", se(r.attrs, {
class: K.value,
onDrop: Z,
onDragover: _,
"data-placeholder": l.placeholder,
onClick: $
}), [!!c.value.length && d("ul", {
ref: s,
class: U.value,
onWheel: (e) => Y(e)
}, [Q()])]);
}
}), ge = te(ce);
export {
ce as FTags,
ge as default,
ue as tagsProps
};