@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
335 lines (334 loc) • 13.1 kB
JavaScript
import { defineComponent as re, inject as ie, ref as v, computed as f, reactive as se, watch as B, onBeforeUnmount as ue, nextTick as ce, openBlock as r, createElementBlock as k, mergeProps as z, unref as a, withModifiers as x, renderSlot as p, Fragment as W, renderList as fe, normalizeClass as b, normalizeStyle as be, createElementVNode as D, createCommentVNode as w, createBlock as h, normalizeProps as ge, createTextVNode as he, toDisplayString as ve } from "vue";
import "../checkbox/index.mjs";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import { useNameHelper as ke, useIcons as me } from "@vexip-ui/config";
import { useRtl as ye, useModifier as xe } from "@vexip-ui/hooks";
import { decide as pe, isNull as H } from "@vexip-ui/utils";
import { TREE_STATE as De } from "./symbol.mjs";
import O from "../icon/icon.mjs";
import X from "../checkbox/checkbox.vue2.mjs";
import V from "../renderer/renderer.mjs";
const we = ["draggable", "aria-disabled", "aria-grabbed"], Ce = ["aria-hidden"], Pe = /* @__PURE__ */ re({
name: "TreeNode",
inheritAttrs: !1,
__name: "tree-node",
props: {
node: {
type: Object,
default: () => ({})
}
},
setup(l) {
const d = l, e = ie(De), o = ke("tree"), R = me(), { isRtl: Y } = ye(), C = v(), j = v(), F = f(() => d.node.parent ? e.nodeStates.get(d.node.parent) : void 0);
xe({
target: C,
passive: !1,
onKeyDown: (n, t) => {
e.expanding || pe(
[
[
() => t.up || t.down,
() => e.handleHittingChange(t.up ? "up" : "down")
],
[
() => t.left || t.right,
() => {
var g, Q;
const i = ((g = d.node.children) == null ? void 0 : g.length) > 0;
t.right && d.node.expanded && i ? e.handleHittingChange("down") : t.left && (!d.node.expanded || !i) ? e.handleNodeHitting((Q = F.value) == null ? void 0 : Q.el) : T(t.right);
}
],
[() => I.value && t.space, $],
[() => t.enter, P]
],
{
beforeMatchAny: () => {
n.preventDefault(), n.stopPropagation();
},
afterMatchAny: t.resetAll
}
);
}
});
const S = v(!e.boundAsyncLoad || d.node.loaded), K = v(e.boundAsyncLoad && d.node.loadFail), L = v(!1), E = v(!1), s = v(!1), u = f(() => {
var n;
return !e.noCascaded && ((n = F.value) == null ? void 0 : n.disabled) || d.node.disabled;
}), N = f(() => {
var n;
return !e.noCascaded && ((n = F.value) == null ? void 0 : n.readonly) || d.node.readonly;
}), Z = f(
() => !d.node.matched && (d.node.childMatched || d.node.upperMatched)
), U = f(() => !!e.linkLine && d.node.depth > 0), _ = f(() => {
var n;
return {
[o.be("node")]: !0,
[o.bem("node", "last")]: d.node.last,
[o.bem("node", "focused")]: s.value,
[o.bem("node", "selected")]: d.node.selected,
[o.bem("node", "expanded")]: d.node.expanded,
[o.bem("node", "disabled")]: u.value,
[o.bem("node", "readonly")]: N.value,
[o.bem("node", "secondary")]: Z.value,
[o.bem("node", "dragging")]: L.value,
[o.bem("node", "drag-over")]: E.value,
[o.bem("node", "link-line")]: U.value,
[o.bem("node", "no-arrow")]: !m.value,
[o.bem("node", "is-floor")]: e.floorSelect && ((n = d.node.children) == null ? void 0 : n.length),
[o.bem("node", "loaded")]: S.value,
[o.bem("node", "load-fail")]: K.value
};
}), q = f(() => {
var g;
const n = d.node.isLeaf;
let t = "auto", i = !1;
return H(n) || n === "auto" ? (t = "auto", i = e.boundAsyncLoad) : t = n, t === "auto" ? !((g = d.node.children) != null && g.length || i && !S.value) : !!t;
}), m = f(() => H(d.node.arrow) || d.node.arrow === "auto" ? e.arrow === "auto" ? !q.value : e.arrow : d.node.arrow), I = f(() => {
const n = d.node.checkbox;
return H(n) ? e.checkbox : n;
}), G = f(() => e.suffixCheckbox), M = se({
el: C,
depth: f(() => d.node.depth),
disabled: u,
readonly: N
});
B([() => e.boundAsyncLoad, () => d.node.loaded], (n) => {
S.value = !n[0] || n[1];
}), B([() => e.boundAsyncLoad, () => d.node.loadFail], (n) => {
K.value = !n[0] || n[1];
}), B(
() => d.node.id,
(n, t) => {
e.nodeStates.delete(t), e.nodeStates.set(n, M);
}
), e.nodeStates.set(d.node.id, M);
let y;
ue(() => {
clearTimeout(y), e.nodeStates.set(d.node.id, M);
});
function c(n, t) {
d.node[n] = t;
}
function ee() {
e.handleNodeClick(d.node), e.blockEffect && J();
}
function $(n = !d.node.checked) {
u.value || d.node.checkDisabled || (c("checked", n), c("partial", !1), ce(() => {
e.computeCheckedState(d.node, n);
}));
}
async function T(n = !d.node.expanded) {
if (!(e.expanding || d.node.loading || u.value || d.node.expandDisabled || q.value))
if (n && e.boundAsyncLoad && !S.value) {
c("loading", !0);
const t = await e.handleAsyncLoad(d.node);
ne(t);
} else
c("expanded", n), n ? e.handleNodeExpand(d.node) : e.handleNodeReduce(d.node);
}
async function P(n = !d.node.selected) {
if (!(u.value || d.node.selectDisabled)) {
if (e.floorSelect) {
await T();
return;
}
c("selected", !N.value && n), N.value || n ? e.handleNodeSelect(d.node) : e.handleNodeCancel(d.node);
}
}
function J() {
e.handleLabelClick(d.node), P();
}
function ne(n = !0) {
var t;
c("loading", !1), c("expanded", n !== !1), n !== !1 ? (c("loaded", !0), c("loadFail", !1), (t = d.node.children) != null && t.length ? e.handleNodeExpand(d.node) : c("arrow", !1)) : c("loadFail", !0);
}
function A() {
return {
el: C.value,
arrow: j.value,
node: d.node
};
}
function ae() {
e.draggable && (L.value = !0, e.handleNodeDragStart(A()));
}
function de(n) {
!e.draggable || !e.dragging || (clearTimeout(y), n.stopPropagation(), n.preventDefault(), E.value = !0, e.handleNodeDragOver(A(), n));
}
function le(n) {
e.draggable && (clearTimeout(y), n.preventDefault(), y = setTimeout(() => {
E.value = !1;
}, 100));
}
function oe(n) {
!e.draggable || !e.dragging || (clearTimeout(y), n.stopPropagation(), n.preventDefault(), E.value = !1, e.handleNodeDrop(A()));
}
function te(n) {
!e.draggable || !e.dragging || (n.stopPropagation(), L.value = !1, e.handleNodeDragEnd(A()));
}
return (n, t) => (r(), k("li", z(n.$attrs, {
ref_key: "wrapper",
ref: C,
class: _.value,
draggable: a(e).draggable,
tabindex: "-1",
"aria-disabled": u.value,
"aria-grabbed": a(e).draggable && L.value ? "true" : void 0,
style: { [a(o).cv("depth")]: l.node.depth },
onClick: x(ee, ["left"]),
onFocus: t[4] || (t[4] = (i) => s.value = !0),
onBlur: t[5] || (t[5] = (i) => s.value = !1),
onDragstart: x(ae, ["stop"]),
onDragover: de,
onDragleave: le,
onDragend: te,
onDrop: oe
}), [
p(n.$slots, "default", {
data: l.node.data,
node: l.node,
depth: l.node.depth,
focused: s.value,
lineCount: 0,
lineIndexes: l.node.lineIndexes,
toggleCheck: $,
toggleExpand: T,
toggleSelect: P
}, () => [
U.value ? (r(), k(W, { key: 0 }, [
(r(!0), k(W, null, fe(l.node.lineIndexes, (i, g) => (r(), k("div", {
key: g,
class: b([
a(o).be("link-line"),
a(o).bem("link-line", "vertical"),
!g && a(o).bem("link-line", "first")
]),
style: be({ [a(o).cv("link-line-index")]: i }),
"aria-hidden": "true"
}, null, 6))), 128)),
D("div", {
class: b([a(o).be("link-line"), a(o).bem("link-line", "horizontal")]),
"aria-hidden": "true"
}, null, 2)
], 64)) : w("", !0),
D("div", {
class: b({
[a(o).be("content")]: !0,
[a(o).bem("content", "effect")]: a(e).blockEffect,
[a(o).bem("content", "disabled")]: a(e).blockEffect && (u.value || l.node.selectDisabled)
})
}, [
D("span", {
ref_key: "arrowEl",
ref: j,
class: b({
[a(o).be("arrow")]: !0,
[a(o).bem("arrow", "transparent")]: !l.node.loading && !m.value,
[a(o).bem("arrow", "expanded")]: l.node.expanded,
[a(o).bem("arrow", "disabled")]: u.value || l.node.expandDisabled
}),
"aria-hidden": !l.node.loading && !m.value,
onClick: t[0] || (t[0] = x((i) => T(), ["stop"]))
}, [
l.node.loading ? (r(), h(a(O), z({ key: 0 }, a(R).loading, { label: "loading" }), null, 16)) : p(n.$slots, "arrow", {
key: 1,
data: l.node.data,
node: l.node,
depth: l.node.depth,
focused: s.value
}, () => [
a(e).arrowIcon ? (r(), h(a(O), {
key: 0,
icon: a(e).arrowIcon
}, null, 8, ["icon"])) : (r(), h(a(O), ge(z({ key: 1 }, a(Y) ? a(R).angleLeft : a(R).angleRight)), null, 16))
])
], 10, Ce),
I.value && !G.value ? (r(), h(a(X), {
key: 0,
inherit: "",
class: b(a(o).be("checkbox")),
"tab-index": -1,
control: m.value,
checked: l.node.checked,
disabled: u.value || l.node.checkDisabled,
partial: l.node.partial,
onClick: t[1] || (t[1] = x((i) => $(), ["prevent", "stop"]))
}, null, 8, ["class", "control", "checked", "disabled", "partial"])) : w("", !0),
D("div", {
class: b({
[a(o).be("label")]: !0,
[a(o).bem("label", "effect")]: !a(e).blockEffect,
[a(o).bem("label", "disabled")]: !a(e).blockEffect && (u.value || l.node.selectDisabled)
}),
onClick: t[2] || (t[2] = (i) => !a(e).blockEffect && J())
}, [
a(e).prefixRenderer || n.$slots.prefix ? (r(), k("div", {
key: 0,
class: b(a(o).be("prefix"))
}, [
a(e).prefixRenderer ? (r(), h(a(V), {
key: 0,
renderer: a(e).prefixRenderer,
data: { node: l.node, depth: l.node.depth, data: l.node.data, focused: s.value }
}, null, 8, ["renderer", "data"])) : p(n.$slots, "prefix", {
key: 1,
data: l.node.data,
node: l.node,
depth: l.node.depth,
focused: s.value
})
], 2)) : w("", !0),
D("div", {
class: b(a(o).be("text"))
}, [
a(e).renderer ? (r(), h(a(V), {
key: 0,
renderer: a(e).renderer,
data: { node: l.node, depth: l.node.depth, data: l.node.data, focused: s.value }
}, null, 8, ["renderer", "data"])) : p(n.$slots, "label", {
key: 1,
data: l.node.data,
node: l.node,
depth: l.node.depth,
focused: s.value
}, () => [
he(ve(l.node.data[a(e).labelKey]), 1)
])
], 2),
a(e).suffixRenderer || n.$slots.suffix ? (r(), k("div", {
key: 1,
class: b(a(o).be("suffix"))
}, [
a(e).suffixRenderer ? (r(), h(a(V), {
key: 0,
renderer: a(e).suffixRenderer,
data: { node: l.node, depth: l.node.depth, data: l.node.data, focused: s.value }
}, null, 8, ["renderer", "data"])) : p(n.$slots, "suffix", {
key: 1,
data: l.node.data,
node: l.node,
depth: l.node.depth,
focused: s.value
})
], 2)) : w("", !0)
], 2),
I.value && G.value ? (r(), h(a(X), {
key: 1,
inherit: "",
class: b([a(o).be("checkbox"), a(o).bem("checkbox", "suffix")]),
"tab-index": -1,
control: m.value,
checked: l.node.checked,
disabled: u.value || l.node.checkDisabled,
partial: l.node.partial,
onClick: t[3] || (t[3] = x((i) => $(), ["prevent", "stop"]))
}, null, 8, ["class", "control", "checked", "disabled", "partial"])) : w("", !0)
], 2)
])
], 16, we));
}
});
export {
Pe as default
};
//# sourceMappingURL=tree-node.vue2.mjs.map