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