@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
408 lines (407 loc) • 11.3 kB
JavaScript
import { withInstall as ge } from "../../components/common/index.esm.js";
import pe, { tagsProps as ve } from "../../components/tags/index.esm.js";
import { resolveAppearance as me, createPropsResolver as ye } from "../../components/dynamic-resolver/index.esm.js";
import { ref as o, defineComponent as he, inject as be, onMounted as Te, computed as T, watch as Ie, createVNode as u, nextTick as P } from "vue";
import { useDesignerComponent as Ce } from "../../components/designer-canvas/index.esm.js";
const ke = {
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 xe(s, l, c, h) {
const n = o(-1), m = o(!1);
function B(d, i, g) {
s.disable || (d.stopPropagation(), i && setTimeout(() => {
n.value = g, m.value = !0, i.moving = !0;
}));
}
function D(d, i) {
if (m.value && (d.preventDefault(), n.value !== i)) {
const g = h.value[n.value], k = h.value;
k.splice(n.value, 1), k.splice(i, 0, g), n.value = i;
}
}
function I(d, i) {
m.value && (d.preventDefault(), d.dataTransfer && (d.dataTransfer.dropEffect = "move"));
}
function C(d, i) {
i && (i.moving = !1), c.value = h.value.filter((g) => g.type === "Tag").map((g) => g.payload), m.value = !1, l.emit("change", c.value);
}
return {
dragstart: B,
dragenter: D,
dragover: I,
dragend: C,
isDragging: m
};
}
const w = /* @__PURE__ */ he({
name: "FTagsDesign",
props: ke,
emits: ["remove", "selectionChange", "change"],
setup(s, l) {
const c = o(s.selectable), h = o(s.customClass), n = o(s.data), m = o(s.tagType), B = o(s.tagStyle), D = o(s.showColor), I = o(s.activeTag), C = o(s.customStyle), d = o(s.showClose), i = o(s.showAddButton), g = o(s.showInput), k = o(s.addButtonText), $ = o(s.enableAddButton);
o(s.placeholder), o(""), o();
const y = o(), F = o(s.wrapText), b = o(), A = o(), q = be("design-item-context"), j = Ce(A, q);
Te(() => {
A.value.componentInstance = j;
}), l.expose(j.value);
function x() {
const e = n.value.map((t) => ({
type: "Tag",
payload: t
}));
return i.value && e.push({
type: "AddButton"
}), e;
}
const p = o(x());
function K(e) {
n.value = e, p.value = x();
}
const R = T(() => p.value.findIndex((e) => e.type === "Input")), N = xe(s, l, n, p), {
dragstart: W,
dragenter: H,
dragover: V,
dragend: X
} = N;
Ie(() => s.data, (e) => K(e));
const z = T(() => {
const e = {
"farris-tags": !0,
"farris-tags-checkable": c.value,
"farris-tags-nowrap": !F.value
};
return h.value.split(" ").reduce((t, a) => (t[a] = !0, t), e), e;
});
function G(e) {
const t = {
"farris-tag-item": !0,
"farris-tag-item-checked": c.value && e.checked,
"farris-tag-item-checkable": c.value,
"farris-tag-item-has-color": D.value,
"farris-tag-item-actived": I.value === e.name
};
if (m.value) {
const a = `farris-tag-item-${m.value}`;
t[a] = !0;
}
return t;
}
const J = T(() => {
const e = {};
return C.value && C.value.split(";").reduce((t, a) => {
const r = a.split(":");
return t[r[0]] = r[1], t;
}, e), e;
});
function Q(e, t) {
c.value && t.selectable && (t.checked = !t.checked, I.value = t.checked ? t.name : "", t.checked && n.value.filter((a) => a.name !== t.name).forEach((a) => {
a.checked = !t.checked;
}), l.emit("change", n.value), l.emit("selectionChange", t));
}
function U(e, t) {
let a;
switch (e.key) {
case "Backspace":
n.value = n.value.filter((r) => r.name !== t.name), l.emit("change", n.value);
break;
case "ArrowLeft":
a = Math.max(y.value.scrollLeft + 20, 0), y.value.scrollLeft = a;
break;
case "ArrowRight":
a = Math.max(y.value.scrollLeft - 20, 0), y.value.scrollLeft = a;
}
}
function Y(e, t) {
const a = n.value.findIndex((r) => r.name === t.name);
if (a > -1) {
const [r] = n.value.splice(a, 1);
p.value = x(), l.emit("change", n.value), l.emit("remove", n.value, r, a);
}
e.stopPropagation();
}
const Z = T(() => ({
"farris-tag-item": !0,
"farris-tag-add-button": !0,
"farris-tag-add-button-disabled": !$.value
}));
function Ke(e) {
}
function _() {
return u("li", {
class: Z.value,
onClick: (e) => void 0
}, [u("span", {
class: "f-icon f-icon-amplification"
}, null), u("span", {
class: "farris-tag-add-text"
}, [k.value])]);
}
function ee(e) {
if (e && !e.innerText) {
const t = R.value;
if (t > 0) {
const [a] = n.value.splice(t - 1, 1);
p.value.splice(t - 1, 1), l.emit("remove", n.value, a, t - 1);
}
}
}
function M(e, t, a) {
e > -1 && (n.value.splice(e, 0, {
name: t,
value: a,
selectable: c.value
}), p.value = x(), l.emit("change", n.value));
}
function O(e) {
if (e && e.innerText) {
const t = e.innerText, a = R.value;
M(a, t, t), e.innerText = "";
}
}
function te(e) {
const t = e.target;
t && (t.innerText ? O(t) : l.emit("change", n.value));
}
function ae(e) {
e.key === "Enter" && O(e.target), e.key === "Backspace" && (ee(e.target), P(() => {
var t;
b.value && ((t = b.value) == null || t.focus());
}));
}
function ne() {
return u("li", {
class: "farris-tag-input-box"
}, [u("div", {
ref: b,
class: "form-control",
contenteditable: "true",
onKeyup: ae,
onBlur: te
}, null)]);
}
function se(e, t) {
return u("li", {
class: G(e),
style: J.value,
tabindex: 0,
id: e.name,
key: e.name,
onClick: (a) => Q(a, e),
onKeydown: (a) => U(a, e),
draggable: "true",
onDragstart: (a) => W(a, e, t),
onDragenter: (a) => H(a, t),
onDragend: (a) => X(a, e),
onDragover: (a) => V(a, t)
}, [u("div", {
title: e.name,
class: "tag-box"
}, [e.name]), d.value && u("span", {
class: "tag-delete"
}, [u("i", {
class: "f-icon f-icon-close",
onClick: (a) => Y(a, e)
}, null)])]);
}
function oe() {
return p.value.map((e, t) => {
switch (e.type) {
case "Tag":
return se(e.payload, t);
case "AddButton":
return _();
case "Input":
return ne();
}
});
}
const le = T(() => ({
"farris-tags-item-container": !0,
"farris-tag-item-capsule": B.value === "capsule"
}));
function re(e) {
const t = Math.max(y.value.scrollLeft - e.deltaX, 0);
y.value.scrollLeft = t;
}
function ie(e) {
const t = y.value, a = n.value.length - 1;
if (t) {
const r = Array.from(t.children).filter((v) => v.className.indexOf("farris-tag-item") > -1).findIndex((v) => {
const f = v.getBoundingClientRect(), S = window.getComputedStyle(v), L = parseInt(S["margin-left"], 10) + f.width + parseInt(S["margin-right"], 10);
return f.left + L > e;
});
if (r > -1)
return r;
}
return a;
}
function ce(e) {
if (g.value) {
const a = ie(e.clientX) + 1, v = p.value.filter((f) => f.type !== "Input");
v.splice(a, 0, {
type: "Input"
}), p.value = v, P(() => {
var f;
b.value && ((f = b.value) == null || f.focus());
});
}
}
function ue(e) {
var a;
e.preventDefault(), e.stopPropagation();
const t = (a = e.dataTransfer) == null ? void 0 : a.getData("Text");
if (t) {
const r = t.split(":"), v = r[0], f = r[1];
[...n.value].findIndex((fe) => fe.value === f) > -1 || M(n.value.length, v, f);
}
}
function de(e) {
e.preventDefault();
}
return () => u("div", {
ref: A,
class: z.value,
onClick: ce,
onDrop: ue,
onDragover: de
}, [u("ul", {
ref: y,
class: le.value,
onWheel: (e) => re(e)
}, [oe()])]);
}
});
function we(s, l, c) {
return l;
}
const Be = /* @__PURE__ */ new Map([
["appearance", me]
]), De = "tags", Ae = "A Farris Component", Se = "object", je = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, Re = {
title: De,
description: Ae,
type: Se,
categories: je
}, Me = "https://json-schema.org/draft/2020-12/schema", Oe = "https://farris-design.gitee.io/tags.schema.json", Le = "tags", Pe = "A Farris Component", Ee = "object", $e = {
id: {
description: "The unique identifier for tags",
type: "string"
},
type: {
description: "The type string of tags",
type: "string",
default: "tags"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, Fe = [
"id",
"type"
], qe = {
$schema: Me,
$id: Oe,
title: Le,
description: Pe,
type: Ee,
properties: $e,
required: Fe
}, E = ye(ve, qe, Be, we, Re);
w.register = (s, l, c, h) => {
s.tags = pe, l.tags = E;
};
w.registerDesigner = (s, l, c) => {
s.tags = w, l.tags = E;
};
const ze = ge(w);
export {
w as FTagsDesign,
ze as default,
E as propsResolver,
ke as tagsProps
};