@idcpj/vue-tree
Version:
A vue tree component using virtual list.
1,671 lines • 72 kB
JavaScript
var $t = Object.defineProperty;
var Kt = (e, t, l) => t in e ? $t(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l;
var E = (e, t, l) => (Kt(e, typeof t != "symbol" ? t + "" : t, l), l);
import { defineComponent as de, ref as v, computed as g, h as At, getCurrentInstance as Ce, reactive as We, watch as me, onMounted as Pe, onBeforeUnmount as Ft, nextTick as Et } from "vue-demi";
import { openBlock as R, createElementBlock as X, createElementVNode as m, resolveComponent as he, normalizeClass as b, mergeProps as ue, toHandlers as Oe, withDirectives as fe, vShow as we, createBlock as xe, createCommentVNode as re, resolveDynamicComponent as It, renderSlot as W, createTextVNode as De, toDisplayString as oe, withModifiers as mt, normalizeStyle as He, Fragment as vt, renderList as je, withCtx as _e, createVNode as $e, vModelText as Vt, createSlots as St, normalizeProps as ve, guardReactiveProps as Se, Transition as Tt } from "vue";
const Bt = [
"_level",
"_filterVisible",
"_parent",
"_loading",
"_loaded",
"_remote",
"_keyField",
"children",
"setChildren"
];
class le {
//#endregion Properties
constructor(t, l = null, n = "id", a = !1) {
/** 节点层级 */
E(this, "_level", 0);
/** 多选是否选中 */
E(this, "checked", !1);
/** 单选是否选中 */
E(this, "selected", !1);
/** 是否半选状态 */
E(this, "indeterminate", !1);
/** 是否禁用 */
E(this, "disabled", !1);
/** 是否展开 */
E(this, "expand", !1);
/** 是否可见 */
E(this, "visible", !0);
/** 过滤后是否可见，如果为 false 则在其他可见情况下也是不可见的 */
E(this, "_filterVisible", !0);
/** 父节点 */
E(this, "_parent", null);
/** 子节点 */
E(this, "children", []);
/** 是否是子节点 */
E(this, "isLeaf", !1);
/** 节点类型,用于对节点进行分类 */
E(this, "type", "");
/** 节点是否正在加载 */
E(this, "_loading", !1);
/** 子节点是否已加载 */
E(this, "_loaded", !1);
this._keyField = n, this._remote = a;
for (let s in t)
Bt.indexOf(s) === -1 && (this[s] = t[s]);
this[n] == null && (this[n] = Math.random().toString(36).substring(2)), this._parent = l, this._parent && (this._level = this._parent._level + 1), this.visible = this._parent === null || this._parent.expand && this._parent.visible, Array.isArray(t.children) && this.setChildren(t.children), this.children.length && (this._loaded = !0), this._remote || (this.isLeaf = !this.children.length);
}
/**
* 设置子节点
* @param children 子节点数据数组
*/
setChildren(t) {
this.children = t.map((l) => new le(
Object.assign({}, l),
this,
this._keyField,
this._remote
));
}
}
var Ke = /* @__PURE__ */ ((e) => (e.none = "none", e.parents = "parents", e.children = "children", e))(Ke || {});
const Lt = [
"setData",
"setChecked",
"setCheckedKeys",
"checkAll",
"clearChecked",
"setSelected",
"clearSelected",
"setExpand",
"setExpandKeys",
"setExpandAll",
"getCheckedNodes",
"getCheckedKeys",
"getIndeterminateNodes",
"getSelectedNode",
"getSelectedKey",
"getExpandNodes",
"getExpandKeys",
"getCurrentVisibleNodes",
"getNode",
"getTreeData",
"getFlatData",
"getNodesCount",
"insertBefore",
"insertAfter",
"append",
"prepend",
"remove",
"filter",
"showCheckedNodes",
"loadRootNodes",
"scrollTo"
];
var Nt = /* @__PURE__ */ ((e) => (e["bottom-start"] = "bottom-start", e["bottom-end"] = "bottom-end", e.bottom = "bottom", e["top-start"] = "top-start", e["top-end"] = "top-end", e.top = "top", e))(Nt || {}), Ne = /* @__PURE__ */ ((e) => (e.top = "top", e.center = "center", e.bottom = "bottom", e))(Ne || {}), q = /* @__PURE__ */ ((e) => (e.before = "before", e.body = "body", e.after = "after", e))(q || {});
const Ue = [
"expand",
"check",
"click",
"select",
"node-dblclick",
"node-right-click",
"node-dragstart",
"node-dragenter",
"node-dragover",
"node-dragleave",
"node-drop"
];
class Mt {
//#endregion Properties
constructor(t) {
//#region Properties
/** 树数据 */
E(this, "data", []);
/** 扁平化的树数据 */
E(this, "flatData", []);
/** 树数据 map */
E(this, "mapData", /* @__PURE__ */ Object.create(null));
/** 未加载但已选中的节点 key ，每次 flattenData 的时候进行检查，将加载的节点从此数组中剔除 */
E(this, "unloadCheckedKeys", []);
/** 未加载但选中的单选节点 key */
E(this, "unloadSelectedKey", null);
/** 当前单选选中节点 key */
E(this, "currentSelectedKey", null);
/** 事件 listeners */
E(this, "listenersMap", {});
this.options = t;
}
setData(t, l = null, n = null) {
this.data = t.map(
(a) => new le(a, null, this.options.keyField, !!this.options.load)
);
for (let a in this.mapData)
delete this.mapData[a];
this.currentSelectedKey = null, this.flatData = this.flattenData(this.data), this.setUnloadCheckedKeys(n || []), l && (this.currentSelectedKey = null, this.setUnloadSelectedKey(l)), this.emit("visible-data-change"), this.emit("set-data");
}
//#region Set api
/**
* 设置单个节点多选选中
* @param key 设置的节点 key
* @param value 是否选中
* @param triggerEvent 是否触发事件
* @param triggerDataChange 是否触发 `data-change` 事件以通知外部刷新视图
* @param filtering 是否正在过滤，如果是，则考虑 `filteredNodeCheckable` Prop，用于判断是否是用户点击节点触发的勾选
*/
setChecked(t, l, n = !0, a = !0, s = !1) {
const r = this.mapData[t];
if (!r)
return this.setUnloadChecked(t, l, n, a);
r.disabled || r.checked && l || !r.checked && !r.indeterminate && !l || (this.options.cascade ? (this.checkNodeDownward(r, l, s), this.checkNodeUpward(r)) : r.checked = l, n && (r.checked ? this.emit("check", r) : this.emit("uncheck", r)), this.triggerCheckedChange(n, a));
}
/**
* 设置单个未加载节点选中，不公开此 API
*/
setUnloadChecked(t, l, n = !0, a = !0) {
const s = this.findIndex(t, this.unloadCheckedKeys);
l ? s === -1 && this.unloadCheckedKeys.push(t) : s !== -1 && this.unloadCheckedKeys.splice(s, 1), this.triggerCheckedChange(n, a);
}
/**
* 批量选中/取消多选选中节点
* @param keys 选中的节点 key 数组
* @param value 是否选中
* @param triggerEvent 是否触发事件
*/
setCheckedKeys(t, l, n = !0, a = !0) {
t.forEach((s) => {
this.setChecked(s, l, !1, !1);
}), this.triggerCheckedChange(n, a);
}
/**
* 多选勾选全部节点
* @param triggerEvent 是否触发事件
* @param triggerDataChange 是否触发视图刷新
*/
checkAll(t = !0, l = !0) {
if (this.options.cascade) {
const n = (a) => {
a.forEach((s) => {
s.disabled ? n(s.children) : this.setChecked(s[this.options.keyField], !0, !1, !1);
});
};
n(this.data);
} else {
const n = this.flatData.length;
for (let a = 0; a < n; a++) {
const s = this.flatData[a];
this.setChecked(s[this.options.keyField], !0, !1, !1);
}
}
this.triggerCheckedChange(t, l);
}
/**
* 清除所有多选已选
* @param triggerEvent 是否触发事件
* @param triggerDataChange 是否触发视图刷新
*/
clearChecked(t = !0, l = !0) {
this.getCheckedNodes().forEach((a) => {
this.setChecked(a[this.options.keyField], !1, !1, !1);
}), this.unloadCheckedKeys = [], this.triggerCheckedChange(t, l);
}
/**
* 触发 checked-change 的快捷方法
* @param triggerEvent 是否触发事件
* @param triggerDataChange 是否触发视图刷新
*/
triggerCheckedChange(t = !0, l = !0) {
t && this.emit("checked-change", this.getCheckedNodes(), this.getCheckedKeys()), l && this.emit("render-data-change");
}
/**
* 设置单选选中
* @param key 选中节点 key
* @param value 是否选中
* @param triggerEvent 是否触发事件
*/
setSelected(t, l, n = !0, a = !0) {
const s = this.mapData[t];
if (!s)
return this.setUnloadSelected(t, l, n, a);
s.disabled || s.selected !== l && (t === this.currentSelectedKey ? l || (s.selected = l, this.currentSelectedKey = null) : l && (this.currentSelectedKey === null ? (s.selected = l, this.currentSelectedKey = s[this.options.keyField]) : (this.mapData[this.currentSelectedKey] && (this.mapData[this.currentSelectedKey].selected = !1), s.selected = l, this.currentSelectedKey = s[this.options.keyField])), n && (s.selected ? this.emit("select", s) : this.emit("unselect", s), this.emit(
"selected-change",
this.getSelectedNode(),
this.getSelectedKey()
)), a && this.emit("render-data-change"));
}
/**
* 设置未加载单选选中节点，不公开此 API
*/
setUnloadSelected(t, l, n = !0, a = !0) {
l ? (this.currentSelectedKey && this.setSelected(this.currentSelectedKey, !1, !1, !1), this.unloadSelectedKey = t) : this.unloadSelectedKey === t && (this.unloadSelectedKey = null), n && this.emit(
"selected-change",
this.getSelectedNode(),
this.getSelectedKey()
), a && this.emit("render-data-change");
}
/**
* 清除当前单选选中
* @param triggerEvent 是否触发事件
* @param triggerDataChange 是否触发视图刷新
*/
clearSelected(t = !0, l = !0) {
this.currentSelectedKey && this.mapData[this.currentSelectedKey] ? this.setSelected(
this.currentSelectedKey,
!1,
t,
l
) : this.unloadSelectedKey !== null && (this.unloadSelectedKey = null, t && this.emit(
"selected-change",
this.getSelectedNode(),
this.getSelectedKey()
), l && this.emit("render-data-change"));
}
/**
* 设置节点展开
* @param key 节点 key
* @param value 是否展开
* @param expandParent 展开节点时是否同时展开父节点
* @param triggerEvent 是否触发事件
* @param triggerDataChange 是否触发 `data-change` 事件以通知外部刷新视图
*/
setExpand(t, l, n = !1, a = !0, s = !0) {
const r = this.mapData[t];
if (!(!r || !n && r.isLeaf) && r.expand !== l) {
if (!r.isLeaf) {
if (typeof this.options.load == "function") {
if (!r._loaded && !r._loading && l) {
r._loading = !0, s && this.emit("visible-data-change"), new Promise((u, p) => {
const w = this.options.load;
w(r, u, p);
}).then((u) => {
if (Array.isArray(u)) {
const p = this.findIndex(r);
if (p === -1)
return;
r._loaded = !0, r.expand = l, r.setChildren(u);
const w = this.getCheckedKeys(), S = this.flattenData(
r.children,
this.getSelectedKey === null
);
this.flatData.splice(p + 1, 0, ...S), this.setUnloadCheckedKeys(w), this.unloadSelectedKey !== null && this.setUnloadSelectedKey(this.unloadSelectedKey), this.emit("set-data");
}
}).catch((u) => {
}).then(() => {
r._loading = !1, a && this.emit("expand", r), s && this.emit("visible-data-change");
});
return;
} else if (r._loading)
return;
}
r.expand = l;
const d = [...r.children];
for (; d.length; )
d[0].expand && d[0].children.length && d.push(...d[0].children), d[0]._filterVisible === !1 ? d[0].visible = !1 : d[0].visible = d[0]._parent === null || d[0]._parent.expand && d[0]._parent.visible, d.shift();
a && this.emit("expand", r), s && this.emit("visible-data-change");
}
n && r._parent && l && this.setExpand(
r._parent[this.options.keyField],
l,
n,
!1,
s
);
}
}
/**
* 批量设置节点展开/折叠
* @param keys 展开的节点 key 数组
* @param value 是否展开
*/
setExpandKeys(t, l, n = !0) {
t.forEach((a) => {
this.setExpand(a, l, !1, !1, !1);
}), n && this.emit("visible-data-change");
}
setExpandAll(t, l = !0) {
this.flatData.forEach((n) => {
(!this.options.load || n._loaded) && this.setExpand(n[this.options.keyField], t, !1, !1, !1);
}), l && this.emit("visible-data-change");
}
//#endregion Set api
//#region Get api
/**
* 获取多选选中节点
* @param ignoreMode 忽略模式，可选择忽略父节点或子节点，默认值是 CTree 的 ignoreMode Prop
*/
getCheckedNodes(t = this.options.ignoreMode) {
if (t === Ke.children) {
const l = [], n = (a) => {
a.forEach((s) => {
s.checked ? l.push(s) : !s.isLeaf && s.indeterminate && n(s.children);
});
};
return n(this.data), l;
} else
return this.flatData.filter((l) => t === Ke.parents ? l.checked && l.isLeaf : l.checked);
}
/**
* 获取多选选中的节点 key ，包括未加载的 key
* @param ignoreMode 忽略模式，同 `getCheckedNodes`
*/
getCheckedKeys(t = this.options.ignoreMode) {
return this.getCheckedNodes(t).map((l) => l[this.options.keyField]).concat(this.unloadCheckedKeys);
}
/**
* 获取多选半选状态节点
*/
getIndeterminateNodes() {
return this.flatData.filter((t) => t.indeterminate);
}
/**
* 获取当前单选选中节点
*/
getSelectedNode() {
return this.currentSelectedKey === null ? null : this.mapData[this.currentSelectedKey] || null;
}
/**
* 获取当前单选选中节点 key ，有可能是未加载的选中项
*/
getSelectedKey() {
return this.currentSelectedKey || this.unloadSelectedKey || null;
}
/**
* 获取未加载但多选选中的节点
*/
getUnloadCheckedKeys() {
return this.unloadCheckedKeys;
}
/**
* 获取展开节点
*/
getExpandNodes() {
return this.flatData.filter((t) => !t.isLeaf && t.expand);
}
/**
* 获取展开节点 keys
*/
getExpandKeys() {
return this.getExpandNodes().map((t) => t[this.options.keyField]);
}
/**
* 根据节点 key 获取节点
* @param key 节点 key
*/
getNode(t) {
return this.mapData[t] || null;
}
//#endregion Get api
//#region Node transfer api
// 这边的 referenceKey 都是被执行的节点，比如 insertBefore ，在这里 referenceKey 就是指要插入到 referenceKey 节点前面
insertBefore(t, l) {
const n = this.getInsertedNode(t, l);
if (!n)
return null;
this.remove(n[this.options.keyField], !1);
const s = this.mapData[l]._parent, r = this.findIndex(
l,
s && s.children
), d = this.findIndex(l), u = s && -1 || this.findIndex(l, this.data);
return this.insertIntoStore(n, s, r, d, u), this.emit("visible-data-change"), n;
}
insertAfter(t, l) {
const n = this.getInsertedNode(t, l);
if (!n)
return null;
this.remove(n[this.options.keyField], !1);
const a = this.mapData[l], s = a._parent, r = this.findIndex(l, s && s.children) + 1, d = this.flatData.length, u = this.findIndex(l);
let p = u + 1;
for (let S = u + 1; S <= d; S++) {
if (S === d) {
p = S;
break;
}
if (this.flatData[S]._level <= a._level) {
p = S;
break;
}
}
const w = s && -1 || this.findIndex(l, this.data) + 1;
return this.insertIntoStore(n, s, r, p, w), this.emit("visible-data-change"), n;
}
append(t, l) {
const n = this.mapData[l];
if (!n.isLeaf) {
const r = n.children.length;
return this.insertAfter(
t,
n.children[r - 1][this.options.keyField]
);
}
const a = this.getInsertedNode(t, l, !0);
if (!a)
return null;
this.remove(a[this.options.keyField], !1);
const s = this.findIndex(l) + 1;
return this.insertIntoStore(a, n, 0, s), this.emit("visible-data-change"), a;
}
prepend(t, l) {
const n = this.mapData[l];
if (!n.isLeaf)
return this.insertBefore(
t,
n.children[0][this.options.keyField]
);
const a = this.getInsertedNode(t, l, !0);
if (!a)
return null;
this.remove(a[this.options.keyField], !1);
const s = this.findIndex(l) + 1;
return this.insertIntoStore(a, n, 0, s), this.emit("visible-data-change"), a;
}
/**
* 删除节点
* @param removedKey 要删除的节点 key
*/
remove(t, l = !0) {
const n = this.mapData[t];
if (!n)
return null;
const a = this.findIndex(n);
if (a === -1)
return null;
let s = 1;
const r = this.flatData.length;
for (let u = a + 1; u < r && this.flatData[u]._level > n._level; u++)
s++;
this.flatData.splice(a, s);
const d = (u) => {
const p = this.mapData[u];
delete this.mapData[u], p.children.forEach((w) => d(w[this.options.keyField]));
};
if (d(t), !n._parent) {
const u = this.findIndex(n, this.data);
u > -1 && this.data.splice(u, 1);
}
if (n._parent) {
const u = this.findIndex(n, n._parent.children);
u !== -1 && n._parent.children.splice(u, 1), n._parent.isLeaf = !n._parent.children.length, n._parent.isLeaf && (n._parent.expand = !1, n._parent.indeterminate = !1), this.updateMovingNodeStatus(n);
}
return l && this.emit("visible-data-change"), n;
}
getInsertedNode(t, l, n = !1) {
const a = this.mapData[l];
if (!a)
return null;
const s = n ? a : a._parent;
if (t instanceof le)
return t[this.options.keyField] === l ? null : t;
if (typeof t == "object") {
if (t[this.options.keyField] === l)
return null;
const r = this.mapData[t[this.options.keyField]];
return r || new le(
t,
s,
this.options.keyField,
!!this.options.load
);
} else
return !this.mapData[t] || t === l ? null : this.mapData[t];
}
/**
* 将一个节点插入 store 记录中
* @param node 要插入的节点
* @param parentNode 要插入节点的父节点
* @param childIndex 如果有父节点，则需提供要插入的节点在同级节点中的顺序
* @param flatIndex 在 flatData 中的索引
* @param dataIndex 如果没有父节点，需要提供节点在 data 中的索引
*/
insertIntoStore(t, l, n, a, s) {
if (a === -1)
return;
n !== -1 && l && l.children.splice(n, 0, t), t._parent = l, l ? (l.isLeaf = !1, this.setExpand(
l[this.options.keyField],
!0,
!1,
!1,
!1
)) : typeof s == "number" && s > -1 && this.data.splice(s, 0, t);
const r = this.flattenData([t]);
t._level = l ? l._level + 1 : 0, r.forEach(
(d) => d._level = d._parent ? d._parent._level + 1 : 0
), this.flatData.splice(a, 0, ...r), this.updateMovingNodeStatus(t);
}
updateMovingNodeStatus(t) {
this.checkNodeUpward(t), this.triggerCheckedChange(), t.selected && this.setSelected(t[this.options.keyField], !0);
}
//#endregion Node transfer api
/**
* 过滤本地节点数据
* @param keyword 过滤关键词
* @param filterMethod 过滤方法
*/
filter(t, l) {
const n = [];
this.flatData.forEach((a) => {
a._filterVisible = a._parent && a._parent._filterVisible || l(t, a), a.visible = a._filterVisible, a._filterVisible && n.push(a);
}), n.forEach((a) => {
const s = [];
let r = a._parent;
for (; r; )
s.unshift(r), r = r._parent;
s.forEach((d) => {
d._filterVisible = !0, d.visible = (d._parent === null || d._parent.expand && d._parent.visible) && d._filterVisible, this.options.expandOnFilter && this.setExpand(
d[this.options.keyField],
!0,
!1,
!1,
!1
);
}), a.visible = a._parent === null || a._parent.expand && a._parent.visible;
}), this.emit("visible-data-change");
}
/**
* 过滤未加载多选节点，对比最终勾选节点是否有变化并触发 checked-change 事件
* @param keys 全量选中节点 key 数组，包括加载与未加载选中节点
*/
setUnloadCheckedKeys(t) {
this.unloadCheckedKeys = t;
const l = t.concat(), n = this.unloadCheckedKeys.length;
for (let s = n - 1; s >= 0; s--) {
const r = this.unloadCheckedKeys[s];
this.mapData[r] && (this.setChecked(r, !0, !1, !1), this.unloadCheckedKeys.splice(s, 1));
}
const a = this.getCheckedKeys();
a.length === l.length && a.every(
(s) => l.some((r) => r === s)
) || this.emit("checked-change", this.getCheckedNodes(), a);
}
/**
* 过滤未加载单选选中节点，对比是否有变化并触发 selected-change 事件
* @param key 节点 key
*/
setUnloadSelectedKey(t) {
const l = this.getSelectedKey();
this.mapData[t] ? (this.setSelected(t, !0, !1), this.unloadSelectedKey = null) : (this.currentSelectedKey && this.setSelected(this.currentSelectedKey, !1, !1), this.unloadSelectedKey = t);
const n = this.getSelectedKey();
n !== l && this.emit("selected-change", this.getSelectedNode(), n);
}
/**
* 保存扁平化的节点数据 `flatData` 与节点数据 Map `mapData`
* @param nodes 树状节点数据
* @param overrideSelected 是否根据数据设置 `selected`
*/
flattenData(t, l = !0, n = []) {
const a = t.length;
for (let s = 0; s < a; s++) {
const r = t[s], d = r[this.options.keyField];
if (n.push(r), this.mapData[d])
throw new Error("[CTree] Duplicate tree node key.");
this.mapData[d] = r, r.checked && this.options.cascade && (this.checkNodeDownward(r, !0), this.checkNodeUpward(r)), r.selected && l && (this.clearSelected(!1, !1), this.currentSelectedKey = r[this.options.keyField], this.emit("selected-change", r, this.currentSelectedKey)), (this.options.defaultExpandAll || r.expand) && !this.options.load && !r.isLeaf && (r.expand = !1, this.setExpand(r[this.options.keyField], !0, !1, !1, !1)), r.children.length && this.flattenData(r.children, l, n);
}
return n;
}
//#region Check nodes
/**
* 向下勾选/取消勾选节点，包括自身
* @param node 需要向下勾选的节点
* @param value 勾选或取消勾选
* @param filtering 是否正在过滤，如果是，则考虑 `filteredNodeCheckable` Prop
*/
checkNodeDownward(t, l, n = !1) {
if (t.children.forEach((a) => {
this.checkNodeDownward(a, l, n);
}), t.isLeaf || this.options.load && !t.children.length) {
if (!t.disabled) {
if (n && !this.options.filteredNodeCheckable && !t._filterVisible)
return;
t.checked = l, t.indeterminate = !1;
}
} else
this.checkParentNode(t);
}
/**
* 向上勾选/取消勾选父节点，不包括自身
* @param node 需要勾选的节点
*/
checkNodeUpward(t) {
let l = t._parent;
for (; l; )
this.checkParentNode(l), l = l._parent;
}
/**
* 根据子节点的勾选状态更新当前父节点的勾选状态
* @param node 需要勾选的节点
*/
checkParentNode(t) {
const l = t.children.length;
if (!l)
return;
let n = !1, a = !1, s = !1;
for (let r = 0; r < l; r++) {
const d = t.children[r];
if (d.checked ? n = !0 : a = !0, n && a || d.indeterminate) {
s = !0, t.checked = !1, t.indeterminate = !0;
break;
}
}
s || (t.checked = n, t.indeterminate = !1);
}
//#endregion Check nodes
//#region Utils
/**
* 搜索节点在指定数组中的位置
*/
findIndex(t, l = this.flatData) {
if (l !== null) {
let n = t instanceof le ? t[this.options.keyField] : t;
const a = l.length;
for (let s = 0; s < a; s++)
if (l[0] instanceof le) {
if (n === l[s][this.options.keyField])
return s;
} else if (n === l[s])
return s;
}
return -1;
}
//#endregion Utils
//#region Mini EventTarget
on(t, l) {
this.listenersMap[t] || (this.listenersMap[t] = []);
let n = [];
Array.isArray(l) ? n = l : n = [l], n.forEach((a) => {
this.listenersMap[t].indexOf(a) === -1 && this.listenersMap[t].push(a);
});
}
off(t, l) {
if (this.listenersMap[t])
if (!l)
this.listenersMap[t] = [];
else {
const n = this.listenersMap[t].indexOf(l);
n > -1 && this.listenersMap[t].splice(n, 1);
}
}
emit(t, ...l) {
if (!this.listenersMap[t])
return;
const n = this.listenersMap[t].length;
for (let a = 0; a < n; a++)
this.listenersMap[t][a](...l);
}
disposeListeners() {
for (const t in this.listenersMap)
this.listenersMap[t] = [];
}
//#endregion Mini EventTarget
}
const Rt = de({
name: "CLoadingIcon"
}), pe = (e, t) => {
const l = e.__vccOpts || e;
for (const [n, a] of t)
l[n] = a;
return l;
}, Ot = { viewBox: "0 0 50 50" }, xt = /* @__PURE__ */ m("circle", {
class: "ctree-loading-icon__circle",
cx: "25",
cy: "25",
r: "20",
fill: "none",
"stroke-width": "5",
"stroke-miterlimit": "10"
}, null, -1), Ht = [
xt
];
function Ut(e, t, l, n, a, s) {
return R(), X("svg", Ot, Ht);
}
const wt = /* @__PURE__ */ pe(Rt, [["render", Ut]]), $ = "ctree-tree-node", Wt = de({
name: "CTreeNode",
components: {
LoadingIcon: wt
},
props: {
/** 节点数据，注意！！为了性能，不让 Vue 监听过多属性，这个 data 不是完整的 TreeNode ，不包括 _parent 和 children 属性 */
data: Object,
/** 节点标题字段 */
titleField: {
type: String,
default: ""
},
/** 节点唯一标识字段 */
keyField: String,
/** 节点渲染 render 函数 */
render: Function,
/** 是否可多选 */
checkable: Boolean,
/** 是否可单选 */
selectable: Boolean,
/** 点击已选中节点是否取消选中 */
unselectOnClick: Boolean,
/** 是否禁用所有节点 */
disableAll: Boolean,
/** 是否可拖拽 */
draggable: Boolean,
/** 是否可放置 */
droppable: Boolean,
getNode: Function
},
emits: [...Ue],
setup(e, { emit: t }) {
var D;
const l = v(!1), n = v(!1), a = v(!1), s = e.keyField, r = e.getNode, d = g(() => {
var o, f, _, N, A;
return [
`${$}__wrapper`,
{
[`${$}__wrapper_is-leaf`]: (o = e.data) == null ? void 0 : o.isLeaf,
[`${$}_disabled`]: e.disableAll || ((f = e.data) == null ? void 0 : f.disabled)
},
// 复选
{
[`${$}_checked`]: e.checkable && ((_ = e.data) == null ? void 0 : _.checked),
[`${$}_indeterminate`]: e.checkable && ((N = e.data) == null ? void 0 : N.indeterminate)
},
// 单选
{
[`${$}_selected`]: (A = e.data) == null ? void 0 : A.selected
}
];
}), u = g(() => [
`${$}__node-body`,
{
[`${$}__drop_active`]: l.value
}
]), p = g(() => [
`${$}__drop`,
{
[`${$}__drop_active`]: n.value
}
]), w = g(() => [
`${$}__drop`,
{
[`${$}__drop_active`]: a.value
}
]), S = g(() => [`${$}__square`, `${$}__checkbox_wrapper`]), L = g(() => {
var o;
return [
`${$}__square`,
`${$}__expand`,
{
[`${$}__expand_active`]: (o = e.data) == null ? void 0 : o.expand
}
];
}), J = g(() => [`${$}__loading-icon`]), G = g(() => {
var o, f, _;
return [
`${$}__checkbox`,
{
[`${$}__checkbox_checked`]: (o = e.data) == null ? void 0 : o.checked,
[`${$}__checkbox_indeterminate`]: (f = e.data) == null ? void 0 : f.indeterminate,
[`${$}__checkbox_disabled`]: e.disableAll || ((_ = e.data) == null ? void 0 : _.disabled)
}
];
}), x = g(() => {
var o, f;
return [
`${$}__title`,
{
[`${$}__title_selected`]: (o = e.data) == null ? void 0 : o.selected,
[`${$}__title_disabled`]: e.disableAll || ((f = e.data) == null ? void 0 : f.disabled)
}
];
}), K = g(() => r(e.data ? e.data[s] : "") || e.data || {}), B = g(() => e.checkable), T = ((D = e.data) == null ? void 0 : D.render) || e.render || null, H = g(() => de({
name: "Render",
functional: !0,
render() {
return typeof T != "function" ? At("div") : T(K.value);
}
})), ne = g(() => {
var f;
let o = {};
return e.draggable && !e.disableAll && !((f = e.data) != null && f.disabled) && (o = {
dragstart: C
}), o;
}), ae = g(() => {
let o = {};
return e.droppable && (o = {
dragenter: V.bind(Ce()),
dragover: h.bind(Ce()),
dragleave: O.bind(Ce()),
drop: Y.bind(Ce())
}), o;
});
function P() {
var o;
(o = e.data) != null && o.isLeaf || t("expand", K.value);
}
function Q() {
var o;
e.disableAll || (o = e.data) != null && o.disabled || !e.checkable || t("check", K.value);
}
function ee(o) {
var f, _;
if (t("click", K.value, o), e.selectable) {
if (e.disableAll || (f = e.data) != null && f.disabled || (_ = e.data) != null && _.selected && !e.unselectOnClick)
return;
t("select", K.value);
} else
e.checkable ? Q() : P();
}
function Z(o) {
t("node-dblclick", K.value, o);
}
function se(o) {
t("node-right-click", K.value, o);
}
const te = v();
function j(o) {
const f = te.value.getBoundingClientRect(), _ = f.height, N = o.clientY - f.top;
return N <= _ * 0.3 ? q.before : N <= _ * (0.3 + 0.4) ? q.body : q.after;
}
function k(o, f = !1) {
n.value = !1, l.value = !1, a.value = !1, f || (o === q.before ? n.value = !0 : o === q.body ? l.value = !0 : o === q.after && (a.value = !0));
}
function C(o) {
var f;
o.dataTransfer && o.dataTransfer.setData("node", JSON.stringify(e.data)), (f = e.data) != null && f.expand && P(), t("node-dragstart", K.value, o);
}
function V(o) {
o.preventDefault();
const f = j(o);
k(f), t("node-dragenter", K.value, o, f);
}
function h(o) {
o.preventDefault();
const f = j(o);
k(f), t("node-dragover", K.value, o, f);
}
function O(o) {
const f = j(o);
k(f, !0), t("node-dragleave", K.value, o, f);
}
function Y(o) {
const f = j(o);
k(f, !0), t("node-drop", K.value, o, f);
}
return {
/** 节点拖拽 dragover */
dragoverBody: l,
/** 节点前拖拽 dragover */
dragoverBefore: n,
/** 节点后拖拽 dragover */
dragoverAfter: a,
wrapperCls: d,
nodeBodyCls: u,
dropBeforeCls: p,
dropAfterCls: w,
// squareCls,
checkboxWrapperCls: S,
expandCls: L,
loadingIconCls: J,
checkboxCls: G,
titleCls: x,
fullData: K,
showCheckbox: B,
renderFunction: T,
renderComponent: H,
dragListeners: ne,
dropListeners: ae,
// titleField,
handleExpand: P,
handleCheck: Q,
handleSelect: ee,
handleDblclick: Z,
handleRightClick: se,
nodeBody: te
};
}
}), Pt = ["draggable"];
function jt(e, t, l, n, a, s) {
var d, u, p, w;
const r = he("LoadingIcon");
return R(), X("div", {
class: b(e.wrapperCls)
}, [
m("div", {
class: b(e.dropBeforeCls)
}, null, 2),
m("div", ue({
ref: "nodeBody",
class: e.nodeBodyCls
}, Oe(e.dropListeners, !0)), [
m("div", {
class: b(e.expandCls)
}, [
fe(m("i", {
onClick: t[0] || (t[0] = (...S) => e.handleExpand && e.handleExpand(...S))
}, null, 512), [
[we, !((d = e.data) != null && d.isLeaf) && !((u = e.data) != null && u._loading)]
]),
(p = e.data) != null && p._loading ? (R(), xe(r, {
key: 0,
class: b(e.loadingIconCls)
}, null, 8, ["class"])) : re("", !0)
], 2),
e.showCheckbox ? (R(), X("div", {
key: 0,
class: b(e.checkboxWrapperCls)
}, [
m("div", {
class: b(e.checkboxCls),
onClick: t[1] || (t[1] = (...S) => e.handleCheck && e.handleCheck(...S))
}, null, 2)
], 2)) : re("", !0),
m("div", ue({
class: e.titleCls,
onClick: t[2] || (t[2] = (...S) => e.handleSelect && e.handleSelect(...S)),
onDblclick: t[3] || (t[3] = (...S) => e.handleDblclick && e.handleDblclick(...S)),
onContextmenu: t[4] || (t[4] = (...S) => e.handleRightClick && e.handleRightClick(...S))
}, Oe(e.dragListeners, !0), {
draggable: e.draggable && !e.disableAll && !((w = e.data) != null && w.disabled)
}), [
e.renderFunction ? (R(), xe(It(e.renderComponent), { key: 0 })) : W(e.$slots, "default", {
key: 1,
title: e.data ? e.data[e.titleField] : "",
node: e.data
}, () => [
De(oe(e.data ? e.data[e.titleField] : ""), 1)
])
], 16, Pt)
], 16),
m("div", {
class: b(e.dropAfterCls)
}, null, 2)
], 2);
}
const Xt = /* @__PURE__ */ pe(Wt, [["render", jt]]), Ct = [
"expand",
"select",
"unselect",
"selected-change",
"check",
"uncheck",
"checked-change",
"set-data"
], Yt = ["node-drop", "check", "select", "expand"], zt = de({
name: "CTree",
components: {
CTreeNode: Xt,
LoadingIcon: wt
},
emits: ["update:modelValue", ...Ue, ...Ct],
props: {
/** 单选模式下为字符串或数字，多选模式下为数组或者以 separator 分隔的字符串。当即可单选又可多选时，value 是多选的值 */
modelValue: [String, Number, Array],
// modelValue: [
// String,
// Number,
// Array as PropType<TreeNodeKeyType[]>,
// ],
/** 传入的树数据。数据量大时，不建议通过 props 传入数据，建议用 `setData` 方法代替 */
data: {
type: Array,
default: () => []
},
/** 供未加载且选中节点查询 title 字段值用的列表，格式与 `data` 一致即可 */
unloadDataList: {
type: Array,
default: () => []
},
/** 过滤已选时是否在列表后面展示未加载的已选节点 */
showUnloadCheckedNodes: {
type: Boolean,
default: !0
},
/** 数据为空时显示的文本 */
emptyText: {
type: String,
default: "暂无数据"
},
/** 节点标题字段 */
titleField: {
type: String,
default: "title"
},
/** 节点唯一标识字段 */
keyField: {
type: String,
default: "id"
},
/** 多选模式下 value 分隔符 */
separator: {
type: String,
default: ","
},
/** 是否可多选 */
checkable: {
type: Boolean,
default: !1
},
/** 是否可单选 */
selectable: {
type: Boolean,
default: !1
},
/** 是否可勾选被过滤节点 */
filteredNodeCheckable: {
type: Boolean,
default: !1
},
/** 父子节点是否关联 */
cascade: {
type: Boolean,
default: !0
},
/** 是否只启用子节点，当 `多选且父子不关联` 或 `单选` 时有效 */
enableLeafOnly: {
type: Boolean,
default: !1
},
/** 是否禁用所有节点 */
disableAll: {
type: Boolean,
default: !1
},
/** 是否默认展开所有节点 */
defaultExpandAll: {
type: Boolean,
default: !1
},
/**
* 默认展开的节点 key
* @deprecated 下一个大版本将废弃，使用 expandedKeys 代替
*/
defaultExpandedKeys: {
type: Array,
default: () => []
},
/** 展开的节点，该 Prop 变化时，树组件将会响应，建议配合事件使用 */
expandedKeys: {
type: Array,
default: () => []
},
/** 是否可拖拽 */
draggable: {
type: Boolean,
default: !1
},
/** 是否可放置 */
droppable: {
type: Boolean,
default: !1
},
/** 在放置节点之前执行的方法，返回 true 允许放置， false 可阻止放置 */
beforeDropMethod: {
type: Function,
default: () => () => !0
},
/** 忽略模式 */
ignoreMode: {
type: String,
default: Ke.none
},
/** 异步加载初始化时是否自动加载根节点 */
autoLoad: {
type: Boolean,
default: !0
},
/** 异步加载方法 */
load: Function,
/** 节点渲染 render 函数 */
render: Function,
/** 节点过滤方法 */
filterMethod: Function,
/**
* 过滤时是否展开所有可见节点
* 有时候可能因为开发者样式设置问题导致虚拟列表失效，而展开数据量又过多从而卡顿
* 加上这个选项并不是为了解决上述问题，而仅仅作为一个可选项
*/
expandOnFilter: {
type: Boolean,
default: !0
},
/** 点击已选中节点是否取消选中 */
unselectOnClick: {
type: Boolean,
default: !0
},
/** 是否显示 loading 图标 */
loading: {
type: Boolean,
default: !1
},
//#region Render nodes related props
/** 根据节点最小高度计算数据总高度 */
nodeMinHeight: {
type: Number,
default: 30
},
/** 子节点缩进 */
nodeIndent: {
type: Number,
default: 20
},
/** 渲染节点数量，可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点 */
renderNodeAmount: {
type: Number,
default: 100
},
/** 当滚动到视野外的节点个数大于此值时刷新渲染节点 */
bufferNodeAmount: {
type: Number,
default: 20
},
//#endregion Render nodes related props
/** 节点根元素的 class ，传入函数以对每个节点定制 class */
nodeClassName: {
type: [
String,
Object,
Array,
Function
]
}
/**
* 使用 padding 代替 margin 来展示子节点缩进
* 此 Prop 是为了方便样式定制，在下个大版本将全部使用 padding
* @deprecated
*/
// usePadding: {
// type: Boolean,
// default: false
// }
},
setup(e, t) {
const l = "ctree-tree", n = (i, c) => {
if (Array.isArray(i) && Array.isArray(c)) {
if (i.length === c.length && i.every(
(y) => c.some((M) => M === y)
))
return !0;
} else if (i === c)
return !0;
return !1;
};
let a = We([]), s = v([]);
const r = v(0), d = v(0), u = v(0), p = v(0), w = v(0), S = v(0), L = v(0), J = v(0), G = v(!1), x = v(
Array.isArray(e.modelValue) ? e.modelValue.concat() : e.modelValue
), K = v(void 0), B = v(), T = v(), H = g(() => ({
height: `${u.value}px`
})), ne = g(() => ({
height: `${p.value}px`
})), ae = g(() => [`${l}__wrapper`]), P = g(() => [`${l}__scroll-area`]), Q = g(() => [`${l}__block-area`]), ee = g(() => [`${l}__empty`]), Z = g(() => [`${l}__empty-text_default`]), se = g(() => [`${l}__loading`]), te = g(() => [`${l}__loading-wrapper`]), j = g(() => [`${l}__loading-icon`]), k = g(() => [`${l}__iframe`]), C = Ue.reduce((i, c) => (Yt.indexOf(c) < 0 && (i[c] = (...y) => {
t.emit.apply(t, [c, ...y]);
}), i), {}), V = () => ({
store: new Mt({
keyField: e.keyField,
ignoreMode: e.ignoreMode,
filteredNodeCheckable: e.filteredNodeCheckable,
cascade: e.cascade,
defaultExpandAll: e.defaultExpandAll,
load: e.load,
expandOnFilter: e.expandOnFilter
}),
blockNodes: []
});
let h = V();
me(
() => e.modelValue,
(i) => {
if (e.checkable) {
if (n(i, x.value))
return;
let c = [];
Array.isArray(i) ? c = i.concat() : typeof i == "string" && (c = i === "" ? [] : i.split(e.separator)), h.store.clearChecked(!1, !1), h.store.setCheckedKeys(c, !0);
} else if (e.selectable) {
if (i === x.value)
return;
const c = h.store.getSelectedKey();
i !== "" && i != null ? h.store.setSelected(i, !0) : (i === "" || i == null) && c && h.store.setSelected(c, !1);
}
}
), me(
() => e.data,
(i) => {
O(i);
}
), me(
() => e.expandedKeys,
() => {
ge();
}
);
function O(i) {
Te();
let c = null, y = null;
e.checkable ? Array.isArray(e.modelValue) ? c = e.modelValue.concat() : typeof e.modelValue == "string" && (c = e.modelValue === "" ? [] : e.modelValue.split(e.separator)) : e.selectable && !Array.isArray(e.modelValue) && (y = e.modelValue), h.store.setData(
i,
y,
c
), ge();
}
function Y(i, c) {
h.store.setChecked(i, c);
}
function D(i, c) {
h.store.setCheckedKeys(i, c);
}
function o() {
h.store.checkAll();
}
function f() {
h.store.clearChecked();
}
function _(i, c) {
h.store.setSelected(i, c);
}
function N() {
h.store.clearSelected();
}
function A(i, c, y = !0) {
h.store.setExpand(i, c, y);
}
function ce(i, c) {
h.store.setExpandKeys(i, c);
}
function Xe(i) {
h.store.setExpandAll(i);
}
function Ye(i) {
return i = i || e.ignoreMode, h.store.getCheckedNodes(i);
}
function ze(i) {
return i = i || e.ignoreMode, h.store.getCheckedKeys(i);
}
function qe() {
return h.store.getIndeterminateNodes();
}
function Je() {
return h.store.getSelectedNode();
}
function Ge() {
return h.store.getSelectedKey();
}
function Qe() {
return h.store.getExpandNodes();
}
function Ze() {
return h.store.getExpandKeys();
}
function et() {
return h.store.flatData.filter((i) => i._filterVisible);
}
function Ae(i) {
return h.store.getNode(i);
}
function tt() {
return h.store.data;
}
function lt() {
return h.store.flatData;
}
function nt() {
return h.store.flatData.length;
}
function at(i, c) {
return h.store.insertBefore(i, c);
}
function st(i, c) {
return h.store.insertAfter(i, c);
}
function it(i, c) {
return h.store.append(i, c);
}
function rt(i, c) {
return h.store.prepend(i, c);
}
function dt(i) {
return h.store.remove(i);
}
function ot(i, c) {
const y = (M, F) => {
const I = F[e.titleField];
return I == null || !I.toString ? !1 : I.toString().toLowerCase().indexOf(M.toLowerCase()) > -1;
};
c = c || e.filterMethod || y, h.store.filter(i, c);
}
function ct(i) {
if (!e.checkable)
return;
i = i ?? e.showUnloadCheckedNodes;
const c = h.store.getCheckedNodes();
if (h.store.filter("", (M, F) => F.checked), !i)
return;
const y = h.store.getUnloadCheckedKeys();
if (y.length) {
const M = y.map((F) => {
const I = e.unloadDataList.concat(c);
let Me = F;
return I.some((Re) => Re[e.keyField] === F && Re[e.titleField] != null ? (Me = Re[e.titleField], !0) : !1), new le(
{
[e.keyField]: F,
[e.titleField]: Me,
checked: !0,
isLeaf: !0
},
null,
e.keyField,
!!e.load
);
});
a = M, h.blockNodes.push(...M), ke(), ie();
}
}
function Fe() {
return G.value = !0, new Promise((i, c) => {
e.load && e.load(null, i, c);
}).then((i) => {
Array.isArray(i) && O(i);
}).catch(() => {
}).then(() => {
G.value = !1;
});
}
function ht(i, c = Ne.top) {
const y = h.store.mapData[i];
if (!y || !y.visible)
return;
let M = -1;
for (let I = 0; I < r.value; I++)
if (h.blockNodes[I][e.keyField] === i) {
M = I;
break;
}
if (M === -1)
return;
let F = M * e.nodeMinHeight;
if (c === Ne.center) {
const I = B.value.clientHeight;
F = F - (I - e.nodeMinHeight) / 2;
} else if (c === Ne.bottom) {
const I = B.value.clientHeight;
F = F - (I - e.nodeMinHeight);
} else
typeof c == "number" && (F = F - c);
B.value && (B.value.scrollTop = F);
}
function ge() {
e.expandedKeys.length && (h.store.setExpandAll(!1, !1), h.store.setExpandKeys(e.expandedKeys, !0));
}
function Ee() {
if (a.length) {
const i = h.store.getUnloadCheckedKeys();
a.forEach((c) => {
c.checked = i.indexOf(c[e.keyField]) > -1;
});
}
}
function ut(i) {
!e.cascade && e.enableLeafOnly && !i.isLeaf || h.store.setChecked(
i[e.keyField],
i.indeterminate ? !0 : !i.checked,
!0,
!0,
!0
);
}
function ft(i) {
e.enableLeafOnly && !i.isLeaf || h.store.setSelected(i[e.keyField], !i.selected);
}
function pt(i) {
h.store.setExpand(i[e.keyField], !i.expand);
}
function gt(i, c, y) {
if (e.droppable && c.dataTransfer)
try {
const F = JSON.parse(c.dataTransfer.getData("node"))[e.keyField], I = i[e.keyField];
if (e.beforeDropMethod(
F,
I,
y
)) {
if (F === I)
return;
y === q.before ? h.store.insertBefore(F, I) : y === q.body || !i.isLeaf && i.expand ? h.store.prepend(F, I) : y === q.after && h.store.insertAfter(F, I), t.emit("node-drop", i, c, y, Ae(F));
}
} catch (M) {
throw new Error(M);
}
}
function Ie(i, c) {
if (e.checkable) {
let y = c;
Array.isArray(e.modelValue) || (y = y.join(e.separator)), Array.isArray(y) ? x.value = y.concat() : x.value = y, t.emit("update:modelValue", y);
}
}
function Ve(i, c) {
if (e.selectable && !e.checkable) {
const y = c || "";
x.value = y, t.emit("update:modelValue", y);
}
}
function kt() {
Ct.forEach((i) => {
h.store.on(i, (...c) => {
t.emit.apply(t, [i, ...c]);
});
});
}
function Te() {
u.value = 0, p.value = 0, B.value && (B.value.scrollTop = 0);
}
function Be() {
h.blockNodes = h.store.flatData.filter(
(i) => i.visible
), ke(), ie();
}
function ke() {
r.value = h.blockNodes.length, d.value = e.nodeMinHeight * r.value;
}
function ie() {
Le(), ye();
}
function Le() {
const i = B.value.clientHeight;
w.value = Math.max(
e.renderNodeAmount,
Math.ceil(i / e.nodeMinHeight) + e.bufferNodeAmount
);
}
function ye(i = !1) {
if (r.value > w.value) {
const c = B.value.scrollTop, y = Math.floor(c / e.nodeMinHeight);
L.value = Math.floor(y / e.bufferNodeAmount) * e.bufferNodeAmount;
} else
L.value = 0;
i && S.value === w.value && J.value === L.value || (s.value = h.blockNodes.slice(L.value, L.value + w.value).map((c) => Object.assign({}, c, {
_parent: null,
children: []
})), u.value = L.value * e.nodeMinHeight, p.value = d.value - (u.value + s.value.length * e.nodeMinHeight));
}
function yt() {
K.value && window.cancelAnimationFrame(K.value), S.value = w.value, J.value = L.value, K.value = window.requestAnimationFrame(
ye.bind(null, !0)
);
}
const _t = {
setData: O,
setChecked: Y,
setCheckedKeys: D,
checkAll: o,
clearChecked: f,
setSelected: _,
clearSelected: N,
setExpand: A,
setExpandKeys: ce,
setExpandAll: Xe,
getCheckedNodes: Ye,
getCheckedKeys: ze,
getIndeterminateNodes: qe,
getSelectedNode: Je,
getSelectedKey: Ge,
getExpandNodes: Qe,
getExpandKeys: Ze,
getCurrentVisibleNodes: et,
getTreeData: tt,
getFlatData: lt,
getNodesCount: nt,
insertBefore: at,
insertAfter: st,
append: it,
prepend: rt,
remove: dt,
filter: ot,
showCheckedNodes: ct,
loadRootNodes: Fe,
scrollTo: ht,
updateExpandedKeys: ge,
updateUnloadStatus: Ee,
handleTreeScroll: yt,
handleNodeCheck: ut,
handleNodeSelect: ft,
handleNodeExpand: pt,
handleNodeDrop: gt,
emitCheckableInput: Ie,
emitSelectableInput: Ve,
// attachStoreEvents,
resetSpaceHeights: Te,
updateBlockNodes: Be,
updateBlockData: ke,
updateRender: ie,
updateRenderAmount: Le,
updateRenderNodes: ye,
getNode: Ae
};
return Pe(() => {
h.store.on("visible-data-change", Be), h.store.on("render-data-change", ie), h.store.on(
"checked-change",
(c, y) => {
Ie(c, y), Ee();
}
), h.store.on("selected-change", Ve), e.data.length ? (O(e.data), e.defaultExpandedKeys.length && h.store.setExpandKeys(e.defaultExpandedKeys, !0)) : typeof e.load == "function" && e.autoLoad && ((e.modelValue || e.unloadDataList) && O([]), Fe());
const i = T.value;
i != null && i.contentWindow && i.contentWindow.addEventListener("resize", ie);
}), Ft(() => {
const i = T.value;
i != null && i.contentWindow && i.contentWindow.removeEventListener("resize", ie), h.store.disposeListeners();
const c = V();
h.store = c.store, h.blockNodes = c.blockNodes;
}), kt(), {
nonReactive: h,
/** 未加载选中的节点，展示已选时生成，其他情况下没用 */
unloadCheckedNodes: a,
/** 可见节点个数 */
blockLength: r,
/** 可见节点总高度 */
blockAreaHeight: d,
/** 顶部填充高度 */
topSpaceHeight: u,
/** 底部填充高度 */
bottomSpaceHeight: p,
/** 实际渲染节点个数 */
renderAmount: w,
/** renderAmount 缓存 */
renderAmountCache: S,
/** 渲染节点（实际渲染节点） */
renderNodes: s,
/** 渲染开始下标 */
renderStart: L,
/** renderStart 缓存 */
renderStartCache: J,
/** 是否正在载入根节点，组件内部调用 load 时会改变此值 */
isRootLoading: G,
/** 缓存的 value ，用于 value 变化时与之做比对 */
valueCache: x,
/** 防抖计时器 id */
debounceTimer: K,
topSpaceStyles: H,
bottomSpaceStyles: ne,
wrapperCls: ae,
scrollAreaCls: P,
blockAreaCls: Q,
emptyCls: ee,
emptyTextDefaultCls: Z,
loadingCls: se,
loadingWrapperCls: te,
loadingIconCls: j,
iframeCls: k,
treeNodeListeners: C,
setData: O,
setChecked: Y,
setCheckedKeys: D,
checkAll: o,
clearChecked: f,
setSelected: _,
clearSelected: N,
setExpand: A,
setExpandKeys: ce,
setExpandAll: Xe,
getCheckedNodes: Ye,
getCheckedKeys: ze,
getIndeterminateNodes: qe,
getSelectedNode: Je,
getSelectedKey: Ge,
getExpandNodes: Qe,
getExpandKeys: Ze,
getCurrentVisibleNodes: et,
getTreeData: tt,
getFlatData: lt,
getNodesCount: nt,
insertBefore: at,
insertAfter: st,
append: it,
prepend: rt,
remove: dt,
filter: ot,
showCheckedNodes: ct,
loadRootNodes: Fe,
scrollTo: ht,
updateExpandedKeys: ge,
updateUnloadStatus: Ee,
handleTreeScroll: yt,
handleNodeCheck: ut,
handleNodeSelect: ft,
handleNodeExpand: pt,
handleNodeDrop: gt,
emitCheckableInput: Ie,
emitSelectableInput: Ve,
attachStoreEvents: kt,
resetSpaceHeights: Te,
updateBlockNodes: Be,
updateBlockData: ke,
updateRender: ie,
updateRenderAmount: Le,
updateRenderNodes: ye,
getNode: Ae,
scrollArea: B,
iframe: T,
methods: _t
};
}
});
function qt(e, t, l, n, a, s) {
const r = he("CTreeNode"), d = he("LoadingIcon");
return R(), X("div", {
class: b(e.wrapperCls)
}, [
m("div", {
ref: "scrollArea",
class: b(e.scrollAreaCls),
onScrollPassive: t[0] || (t[0] = mt((...u) => e.handleTreeScroll && e.handleTreeScroll(...u), ["stop"]))
}, [
m("div", {
class: b(e.blockAreaCls)
}, [
m("div", {
style: He(e.topSpaceStyles)
}, null, 4),
(R(!0), X(vt, null, je(e.renderNodes, (u) => (R(), xe(r, ue(e.$props, {
key: u[e.keyField],
data: u,
getNode: e.getNode
}, Oe(e.treeNodeListeners), {
class: typeof e.nodeClassName == "function" ? e.nodeClassName(u) : e.nodeClassName,
style: {
minHeight: `${e.nodeMinHeight}px`,
paddingLeft: `${u._level * e.nodeIndent}px`
},
onCheck: e.handleNodeCheck,
onSelect: e.handleNodeSelect,
onExpand: e.handleNodeExpand,
onNodeDrop: e.handleNodeDrop
}), {
default: _e(({ title: p