@vaebe/ccui 2.0.0-beta.0

package/tree/index.es.js

@@ -0,0 +1,810 @@
+import { computed as e, defineComponent as t, h as n, nextTick as r, onUnmounted as i, ref as a, shallowRef as o, toRef as s, watch as c } from "vue";
+//#region ../icons/dist/caret-right-outlined-RzTzenJQ.js
+function l(e) {
+	if (!(e == null || e === "")) return typeof e == "number" ? `${e}px` : e;
+}
+function u(e) {
+	let { name: t, viewBox: r = "0 0 1024 1024", path: i } = e, a = Array.isArray(i) ? i : [i], o = (e) => {
+		let t = l(e.size), i = {
+			display: "inline-flex",
+			lineHeight: 0,
+			verticalAlign: "-0.125em"
+		};
+		t && (i.fontSize = t), e.color && (i.color = e.color);
+		let o = e.rotate;
+		o !== void 0 && o !== "" && (i.transform = `rotate(${typeof o == "number" ? `${o}deg` : o})`, i.transformOrigin = "center");
+		let s = typeof e.style == "string" ? i : {
+			...i,
+			...e.style
+		};
+		return n("span", {
+			class: [
+				"ccui-icon",
+				e.spin && "ccui-icon--spin",
+				e.class
+			],
+			style: s,
+			"aria-hidden": "true"
+		}, n("svg", {
+			viewBox: r,
+			width: "1em",
+			height: "1em",
+			fill: "currentColor"
+		}, a.map((e) => n("path", { d: e }))));
+	};
+	return o.displayName = t, o.props = [
+		"size",
+		"color",
+		"rotate",
+		"spin",
+		"class",
+		"style"
+	], o;
+}
+var d = u({
+	name: "CaretRightOutlined",
+	path: "M384 192v640l384-320.064z"
+});
+//#endregion
+//#region ../ccui/ui/shared/hooks/use-namespace.ts
+function f(e, t, n) {
+	let r = e;
+	return t && (r += `__${t}`), n && (r += `--${n}`), r;
+}
+function ee(e, t = !1) {
+	let n = t ? `.ccui-${e}` : `ccui-${e}`;
+	return {
+		b: () => f(n),
+		e: (e) => e ? f(n, e) : "",
+		m: (e) => e ? f(n, "", e) : "",
+		em: (e, t) => e && t ? f(n, e, t) : "",
+		is: (e) => `is-${e}`
+	};
+}
+//#endregion
+//#region ../ccui/ui/shared/hooks/use-virtual-list.ts
+function te(t, n) {
+	let r = a(0), i = n.buffer ?? 4, o = e(() => t.value.length * n.itemHeight), s = e(() => Math.min(n.maxHeight, o.value));
+	return {
+		scrollTop: r,
+		onScroll: (e) => {
+			r.value = e.currentTarget.scrollTop;
+		},
+		visible: e(() => {
+			let e = t.value;
+			if (e.length === 0) return [];
+			let a = Math.max(0, Math.floor(r.value / n.itemHeight) - i), o = Math.ceil(s.value / n.itemHeight) + i * 2, c = Math.min(e.length, a + o), l = [];
+			for (let t = a; t < c; t += 1) l.push({
+				index: t,
+				data: e[t],
+				top: t * n.itemHeight
+			});
+			return l;
+		}),
+		totalHeight: o,
+		containerHeight: s,
+		scrollToIndex: (e, t) => {
+			if (!t) return;
+			let i = e * n.itemHeight;
+			i < r.value ? t.scrollTop = i : i + n.itemHeight > r.value + s.value && (t.scrollTop = i - s.value + n.itemHeight);
+		}
+	};
+}
+//#endregion
+//#region ../ccui/ui/tree/src/composables/use-tree-check.ts
+function ne(t, n, r) {
+	return e(() => {
+		let { flatAll: e, byKey: i } = t.value;
+		if (r.value) return {
+			checked: new Set(n.value),
+			halfChecked: /* @__PURE__ */ new Set()
+		};
+		let a = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s = new Set(n.value), c = (e) => {
+			let t = i.get(e);
+			return !!t && !t.disableCheckbox && !t.disabled;
+		};
+		for (let t of e) if (s.has(t.key)) {
+			let e = [t];
+			for (; e.length;) {
+				let t = e.pop();
+				c(t.key) && a.add(t.key);
+				for (let n of t.childKeys) {
+					let t = i.get(n);
+					t && e.push(t);
+				}
+			}
+		}
+		for (let t = e.length - 1; t >= 0; --t) {
+			let n = e[t];
+			if (!n.hasChildren) continue;
+			let r = n.childKeys.map((e) => i.get(e)).filter((e) => !!e && c(e.key));
+			if (r.length === 0) continue;
+			let s = r.every((e) => a.has(e.key)), l = r.some((e) => a.has(e.key) || o.has(e.key));
+			s ? (c(n.key) && a.add(n.key), o.delete(n.key)) : l && (o.add(n.key), a.delete(n.key));
+		}
+		return {
+			checked: a,
+			halfChecked: o
+		};
+	});
+}
+function re(e, t, n, r) {
+	let i = e.byKey.get(n);
+	if (!i || i.disabled || i.disableCheckbox) return Array.from(t);
+	let a = t.has(n), o = new Set(t);
+	if (r) return a ? o.delete(n) : o.add(n), Array.from(o);
+	let s = [], c = [n];
+	for (; c.length;) {
+		let t = c.pop();
+		s.push(t);
+		let n = e.byKey.get(t);
+		if (n) for (let e of n.childKeys) c.push(e);
+	}
+	if (a) for (let e of s) o.delete(e);
+	else for (let t of s) {
+		let n = e.byKey.get(t);
+		n && !n.disabled && !n.disableCheckbox && o.add(t);
+	}
+	for (let t of [...i.parentKeys].reverse()) {
+		let n = e.byKey.get(t);
+		if (!n) continue;
+		let r = n.childKeys.map((t) => e.byKey.get(t)).filter((e) => !!e && !e.disableCheckbox && !e.disabled);
+		r.length !== 0 && (r.every((e) => o.has(e.key)) ? o.add(t) : o.delete(t));
+	}
+	return Array.from(o);
+}
+//#endregion
+//#region ../ccui/ui/tree/src/composables/use-tree-flatten.ts
+var p = {
+	key: "key",
+	title: "title",
+	children: "children",
+	disabled: "disabled",
+	disableCheckbox: "disableCheckbox",
+	isLeaf: "isLeaf",
+	selectable: "selectable"
+};
+function ie(e) {
+	return {
+		...p,
+		...e
+	};
+}
+function m(e, t, n) {
+	return e[t.key] ?? `__auto_${n}`;
+}
+function h(e, t) {
+	let n = e[t.children];
+	return Array.isArray(n) ? n : void 0;
+}
+function g(e, t, n, r, i) {
+	let a = h(e, t), o = e[t.isLeaf], s = !!a && a.length > 0, c = o === void 0 ? !s && !e.loadable : o, l = m(e, t, i);
+	return {
+		key: l,
+		raw: e,
+		title: e[t.title] ?? l,
+		level: n,
+		parentKeys: r,
+		isLeaf: c,
+		disabled: !!e[t.disabled],
+		disableCheckbox: !!e[t.disableCheckbox],
+		selectable: e[t.selectable] !== !1,
+		hasChildren: s,
+		childKeys: s ? a.map((e, n) => m(e, t, i * 1e3 + n)) : []
+	};
+}
+function _(e) {
+	return e == null ? "" : typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : "";
+}
+function ae(t, n) {
+	return e(() => {
+		let e = [], r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), a = [], o = n.value, s = 0, c = (t, n, l) => {
+			let u = [];
+			for (let i of t) {
+				s += 1;
+				let t = g(i, o, n, l, s);
+				e.push(t), u.push(t), r.set(t.key, t);
+				let a = h(i, o);
+				a && c(a, n + 1, [...l, t.key]);
+			}
+			l.length === 0 ? a.push(...u.map((e) => e.key)) : i.set(l[l.length - 1], u);
+		};
+		return c(t.value, 0, []), {
+			flatAll: e,
+			byKey: r,
+			childrenByKey: i,
+			rootKeys: a
+		};
+	});
+}
+function oe(t, n, r, i) {
+	return e(() => {
+		let { flatAll: e } = t.value, a = n.value, o = r.value.trim(), s = i?.value, c = [], l = /* @__PURE__ */ new Set();
+		if (o || s) {
+			for (let t of e) if (s ? s(t.raw, t.parentKeys) : o.length > 0 && _(t.title).toLowerCase().includes(o.toLowerCase())) {
+				l.add(t.key);
+				for (let e of t.parentKeys) l.add(e);
+			}
+		}
+		for (let t of e) l.size > 0 && !l.has(t.key) || t.parentKeys.every((e) => a.has(e)) && c.push(t);
+		return c;
+	});
+}
+//#endregion
+//#region ../ccui/ui/tree/src/composables/use-tree-state.ts
+function v(e) {
+	return new Set(e ?? []);
+}
+function y(t, n, r) {
+	let i = a(v(n.value));
+	return c(t, (e) => {
+		e !== void 0 && (i.value = v(e));
+	}), {
+		current: e(() => t.value === void 0 ? i.value : v(t.value)),
+		setKeys: (e) => {
+			t.value === void 0 && (i.value = v(e)), r(e);
+		}
+	};
+}
+function se(t, n, r) {
+	let i = e(() => t.selectedKeys), a = e(() => t.defaultSelectedKeys ?? []), o = e(() => t.checkedKeys), s = e(() => t.defaultCheckedKeys ?? []), c = e(() => t.expandedKeys), l = e(() => t.expandedKeys ? t.expandedKeys : n.value.length > 0 ? n.value : t.defaultExpandedKeys ?? []), u = y(i, a, (e) => r("update:selectedKeys", e)), d = y(o, s, (e) => r("update:checkedKeys", e)), f = y(c, l, (e) => r("update:expandedKeys", e));
+	return {
+		selectedKeys: u.current,
+		setSelectedKeys: u.setKeys,
+		checkedKeys: d.current,
+		setCheckedKeys: d.setKeys,
+		expandedKeys: f.current,
+		setExpandedKeys: f.setKeys
+	};
+}
+//#endregion
+//#region ../ccui/ui/tree/src/tree-types.ts
+var b = {
+	data: {
+		type: Array,
+		default: () => []
+	},
+	fieldNames: {
+		type: Object,
+		default: () => ({})
+	},
+	selectable: {
+		type: Boolean,
+		default: !0
+	},
+	multiple: {
+		type: Boolean,
+		default: !1
+	},
+	selectedKeys: {
+		type: Array,
+		default: void 0
+	},
+	defaultSelectedKeys: {
+		type: Array,
+		default: () => []
+	},
+	checkable: {
+		type: Boolean,
+		default: !1
+	},
+	checkedKeys: {
+		type: Array,
+		default: void 0
+	},
+	defaultCheckedKeys: {
+		type: Array,
+		default: () => []
+	},
+	checkStrictly: {
+		type: Boolean,
+		default: !1
+	},
+	expandedKeys: {
+		type: Array,
+		default: void 0
+	},
+	defaultExpandedKeys: {
+		type: Array,
+		default: () => []
+	},
+	defaultExpandAll: {
+		type: Boolean,
+		default: !1
+	},
+	disabled: {
+		type: Boolean,
+		default: !1
+	},
+	loadData: {
+		type: Function,
+		default: void 0
+	},
+	draggable: {
+		type: Boolean,
+		default: !1
+	},
+	showLine: {
+		type: Boolean,
+		default: !1
+	},
+	blockNode: {
+		type: Boolean,
+		default: !1
+	},
+	expandAction: {
+		type: [String, Boolean],
+		default: "click"
+	},
+	searchValue: {
+		type: String,
+		default: ""
+	},
+	filterTreeNode: {
+		type: Function,
+		default: void 0
+	},
+	indentSize: {
+		type: Number,
+		default: 24
+	},
+	virtualScroll: {
+		type: Boolean,
+		default: !1
+	},
+	virtualItemHeight: {
+		type: Number,
+		default: 32
+	},
+	virtualMaxHeight: {
+		type: Number,
+		default: 320
+	},
+	focusedKey: {
+		type: [String, Number],
+		default: void 0
+	},
+	dragHoverExpandDelay: {
+		type: Number,
+		default: 600
+	},
+	dragAutoScroll: {
+		type: Boolean,
+		default: !0
+	},
+	dragAutoScrollEdge: {
+		type: Number,
+		default: 32
+	},
+	dragAutoScrollSpeed: {
+		type: Number,
+		default: 12
+	},
+	classNames: {
+		type: Object,
+		default: void 0
+	},
+	styles: {
+		type: Object,
+		default: void 0
+	}
+};
+//#endregion
+//#region ../ccui/ui/tree/src/tree.tsx
+function ce(e) {
+	return e.filter((e) => e.hasChildren).map((e) => e.key);
+}
+function x(e) {
+	return e == null ? "" : typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : "";
+}
+function le(e, t) {
+	let r = x(e);
+	if (!t) return r;
+	let i = r.toLowerCase(), a = t.toLowerCase(), o = i.indexOf(a);
+	return o < 0 ? r : n("span", null, [
+		r.slice(0, o),
+		n("span", { class: "ccui-tree__highlight" }, r.slice(o, o + t.length)),
+		r.slice(o + t.length)
+	]);
+}
+var S = /* @__PURE__ */ t({
+	name: "CTree",
+	props: b,
+	emits: [
+		"update:selectedKeys",
+		"update:checkedKeys",
+		"update:expandedKeys",
+		"update:focusedKey",
+		"select",
+		"check",
+		"expand",
+		"load",
+		"drop",
+		"dragstart",
+		"dragenter",
+		"dragover",
+		"dragleave",
+		"focus-change",
+		"load-error"
+	],
+	setup(t, { emit: l, expose: u, slots: f }) {
+		let p = ee("tree"), m = e(() => ie(t.fieldNames)), h = s(t, "data"), g = s(t, "searchValue"), _ = e(() => t.filterTreeNode), v = ae(h, m), y = a([]);
+		t.defaultExpandAll && t.expandedKeys === void 0 && (t.defaultExpandedKeys ?? []).length === 0 && (y.value = ce(v.value.flatAll));
+		let { selectedKeys: b, setSelectedKeys: x, checkedKeys: S, setCheckedKeys: C, expandedKeys: w, setExpandedKeys: ue } = se(t, y, l), T = ne(v, S, e(() => t.checkStrictly)), E = oe(v, w, g, _), D = a(/* @__PURE__ */ new Set()), O = a(/* @__PURE__ */ new Set()), k = a(/* @__PURE__ */ new Set()), A = o(null), j = o(null), M = o(null), N = o(null), P = o(null), F = o(0), I = a(t.focusedKey), L = e(() => t.focusedKey === void 0 ? I.value : t.focusedKey), R = (e) => {
+			t.focusedKey === void 0 && (I.value = e), l("update:focusedKey", e), l("focus-change", e);
+		}, z = a(null), B = a(null), V = e(() => {
+			let e = /* @__PURE__ */ new Map();
+			return E.value.forEach((t, n) => e.set(t.key, n)), e;
+		}), H = e(() => t.virtualScroll && E.value.length > 0), U = te(E, {
+			itemHeight: t.virtualItemHeight,
+			maxHeight: t.virtualMaxHeight
+		}), W = async (e, n) => {
+			if (t.loadData) {
+				k.value.delete(e.key), k.value = new Set(k.value), D.value.add(e.key), D.value = new Set(D.value);
+				try {
+					await t.loadData(e.raw), O.value.add(e.key), O.value = new Set(O.value), l("load", Array.from(O.value), {
+						event: n,
+						node: e
+					});
+				} catch (t) {
+					k.value.add(e.key), k.value = new Set(k.value), l("load-error", {
+						error: t,
+						node: e
+					});
+				} finally {
+					D.value.delete(e.key), D.value = new Set(D.value);
+				}
+			}
+		}, G = async (e, n) => {
+			if (t.disabled) return;
+			let r = w.value.has(e.key), i = new Set(w.value);
+			r ? i.delete(e.key) : (i.add(e.key), t.loadData && !e.hasChildren && !e.isLeaf && !O.value.has(e.key) && await W(e, n));
+			let a = Array.from(i);
+			ue(a), l("expand", a, {
+				expanded: !r,
+				node: e
+			});
+		}, K = async (e) => {
+			let n = v.value.byKey.get(e);
+			!n || !t.loadData || await W(n);
+		}, q = (e, n) => {
+			if (t.disabled || !t.selectable || !e.selectable || e.disabled) return;
+			let r = b.value.has(e.key), i;
+			i = t.multiple ? r ? Array.from(b.value).filter((t) => t !== e.key) : [...b.value, e.key] : r ? [] : [e.key], x(i), l("select", i, {
+				selectedKeys: i,
+				selected: !r,
+				node: e,
+				event: n
+			});
+		}, J = (e, n) => {
+			if (t.disabled || !t.checkable || e.disableCheckbox || e.disabled) return;
+			let r = T.value.checked.has(e.key), i = t.checkStrictly ? S.value : T.value.checked, a = re(v.value, i, e.key, t.checkStrictly);
+			C(a), l("check", a, {
+				checkedKeys: a,
+				halfCheckedKeys: Array.from(T.value.halfChecked),
+				checked: !r,
+				node: e,
+				event: n
+			});
+		}, de = (e, n) => {
+			if (!t.draggable || n.disabled) {
+				e.preventDefault();
+				return;
+			}
+			j.value = n.key, e.dataTransfer?.setData("text/plain", String(n.key)), l("dragstart", {
+				event: e,
+				node: n
+			});
+		}, fe = (e, t) => {
+			let n = t.getBoundingClientRect();
+			if (!n.height) return "inside";
+			let r = (e.clientY - n.top) / n.height;
+			return r < .25 ? "before" : r > .75 ? "after" : "inside";
+		}, Y = () => {
+			M.value &&= (clearTimeout(M.value), null), N.value = null;
+		}, pe = (e, n) => {
+			!t.dragHoverExpandDelay || t.dragHoverExpandDelay <= 0 || !e.hasChildren && (!t.loadData || e.isLeaf) || w.value.has(e.key) || N.value !== e.key && (Y(), N.value = e.key, M.value = setTimeout(() => {
+				j.value !== null && N.value === e.key && G(e, n), M.value = null;
+			}, t.dragHoverExpandDelay));
+		}, X = () => {
+			F.value = 0, P.value !== null && typeof cancelAnimationFrame == "function" && cancelAnimationFrame(P.value), P.value = null;
+		}, Z = () => {
+			let e = B.value;
+			if (!e || F.value === 0) {
+				P.value = null;
+				return;
+			}
+			e.scrollTop += F.value, typeof requestAnimationFrame == "function" ? P.value = requestAnimationFrame(Z) : P.value = null;
+		}, me = (e) => {
+			if (!t.dragAutoScroll) return;
+			let n = B.value;
+			if (!n) return;
+			let r = n.getBoundingClientRect(), i = t.dragAutoScrollEdge, a = t.dragAutoScrollSpeed, o = e.clientY - r.top, s = r.bottom - e.clientY, c = 0;
+			o < i && o > 0 ? c = -a : s < i && s > 0 && (c = a);
+			let l = F.value === 0;
+			F.value = c, c !== 0 && l && typeof requestAnimationFrame == "function" ? P.value = requestAnimationFrame(Z) : c === 0 && X();
+		}, he = (e, n) => {
+			if (!t.draggable || j.value === null) return;
+			e.preventDefault();
+			let r = fe(e, e.currentTarget);
+			A.value = {
+				key: n.key,
+				position: r
+			}, r === "inside" ? pe(n, e) : N.value !== null && Y(), me(e), l("dragover", {
+				event: e,
+				node: n
+			});
+		}, ge = (e, n) => {
+			t.draggable && l("dragenter", {
+				event: e,
+				node: n
+			});
+		}, _e = (e, n) => {
+			t.draggable && (N.value === n.key && Y(), l("dragleave", {
+				event: e,
+				node: n
+			}));
+		}, ve = (e, n) => {
+			if (!t.draggable || j.value === null) return;
+			e.preventDefault(), Y(), X();
+			let r = v.value.byKey.get(j.value);
+			if (!r || r.key === n.key) {
+				j.value = null, A.value = null;
+				return;
+			}
+			l("drop", {
+				event: e,
+				node: n,
+				dragNode: r,
+				dropPosition: A.value?.key === n.key ? A.value.position : "inside"
+			}), j.value = null, A.value = null;
+		}, ye = (e) => {
+			if (f.switcher) return f.switcher({
+				expanded: w.value.has(e.key),
+				node: e,
+				loading: D.value.has(e.key),
+				loadFailed: k.value.has(e.key)
+			});
+			let r = w.value.has(e.key), i = D.value.has(e.key), a = k.value.has(e.key);
+			return i ? n("span", { class: p.e("switcher-loading") }, "○") : a ? n("span", {
+				class: p.e("switcher-error"),
+				role: "button",
+				title: "Click to retry",
+				onClick: (t) => {
+					t.stopPropagation(), K(e.key);
+				}
+			}, "!") : e.isLeaf && !e.hasChildren ? n("span", { class: p.e("switcher-leaf") }) : n("span", {
+				class: [
+					p.e("switcher"),
+					r && p.em("switcher", "open"),
+					t.classNames?.switcher
+				],
+				style: t.styles?.switcher
+			}, n(d, { size: 12 }));
+		}, be = (e) => {
+			if (!t.checkable) return null;
+			let r = T.value.checked.has(e.key), i = T.value.halfChecked.has(e.key);
+			return n("span", {
+				class: [
+					p.e("checkbox"),
+					r && p.em("checkbox", "checked"),
+					i && p.em("checkbox", "indeterminate"),
+					(e.disabled || e.disableCheckbox) && p.em("checkbox", "disabled")
+				],
+				role: "checkbox",
+				"aria-checked": i ? "mixed" : r,
+				onClick: (t) => {
+					t.stopPropagation(), J(e, t);
+				}
+			}, r ? "✓" : i ? "–" : "");
+		}, xe = (e) => f.title ? f.title({
+			node: e,
+			data: e.raw,
+			expanded: w.value.has(e.key)
+		}) : le(e.title, g.value), Se = (e) => f.icon ? n("span", { class: p.e("icon") }, f.icon({
+			node: e,
+			expanded: w.value.has(e.key)
+		})) : e.raw.icon ? n("span", { class: p.e("icon") }, e.raw.icon) : null, Ce = (e) => {
+			if (!t.showLine || e.level === 0) return null;
+			let r = [];
+			for (let i = 0; i < e.level; i += 1) f.connector ? r.push(n("span", {
+				key: `guide-${i}`,
+				class: p.e("guide"),
+				style: { left: `${i * t.indentSize + t.indentSize / 2}px` }
+			}, f.connector({
+				depth: i,
+				node: e
+			}))) : r.push(n("span", {
+				key: `guide-${i}`,
+				class: p.e("guide"),
+				style: { left: `${i * t.indentSize + t.indentSize / 2}px` }
+			}));
+			return r;
+		}, we = () => {
+			Y(), X(), j.value = null, A.value = null;
+		}, Te = (e, r) => {
+			let i = {
+				paddingLeft: `${t.indentSize * e.level}px`,
+				...r
+			}, a = b.value.has(e.key), o = L.value === e.key, s = A.value?.key === e.key, c = s ? A.value.position : null, l = N.value === e.key;
+			return n("div", {
+				key: e.key,
+				class: [
+					p.e("node"),
+					a && p.em("node", "selected"),
+					o && p.em("node", "focused"),
+					e.disabled && p.em("node", "disabled"),
+					s && c === "inside" && p.em("node", "drop-inside"),
+					s && c === "before" && p.em("node", "drop-before"),
+					s && c === "after" && p.em("node", "drop-after"),
+					t.blockNode && p.em("node", "block"),
+					l && p.em("node", "hover-expand"),
+					t.classNames?.node
+				],
+				role: "treeitem",
+				tabindex: o ? 0 : -1,
+				"aria-selected": a,
+				"aria-expanded": e.hasChildren ? w.value.has(e.key) : void 0,
+				"aria-disabled": e.disabled || void 0,
+				"data-key": e.key,
+				style: [i, t.styles?.node],
+				draggable: t.draggable && !e.disabled ? !0 : void 0,
+				onDragstart: (t) => de(t, e),
+				onDragover: (t) => he(t, e),
+				onDragenter: (t) => ge(t, e),
+				onDragleave: (t) => _e(t, e),
+				onDrop: (t) => ve(t, e),
+				onDragend: we,
+				onFocus: () => {
+					L.value !== e.key && R(e.key);
+				}
+			}, [
+				...Ce(e) || [],
+				n("span", {
+					class: p.e("switcher-wrap"),
+					onClick: (n) => {
+						n.stopPropagation(), (e.hasChildren || t.loadData && !e.isLeaf) && G(e, n);
+					}
+				}, ye(e)),
+				be(e),
+				n("span", {
+					class: [p.e("content"), t.classNames?.label],
+					style: t.styles?.label,
+					onClick: (n) => {
+						q(e, n), t.expandAction === "click" && !t.disabled && !e.disabled && (e.hasChildren || t.loadData && !e.isLeaf) && G(e, n);
+					}
+				}, [Se(e), n("span", { class: p.e("title") }, xe(e))])
+			]);
+		}, Ee = (e) => {
+			let t = E.value;
+			if (t.length === 0) return;
+			let n = L.value, r = n === void 0 ? -1 : V.value.get(n) ?? -1, i = Math.max(0, Math.min(t.length - 1, r + e));
+			if (r === i && n !== void 0) return;
+			let a = t[i].key;
+			R(a);
+		}, Q = (e) => {
+			let t = E.value;
+			t.length !== 0 && R(t[e === 1 ? t.length - 1 : 0].key);
+		}, $ = (e) => {
+			if (t.disabled) return;
+			let n = E.value;
+			if (n.length === 0) return;
+			let r = L.value ?? n[0].key, i = V.value.get(r) ?? 0, a = n[i];
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), Ee(1);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), Ee(-1);
+					break;
+				case "ArrowRight":
+					if (e.preventDefault(), a.hasChildren && !w.value.has(a.key)) G(a, e);
+					else if (a.hasChildren) {
+						let e = n[i + 1];
+						e && e.parentKeys.includes(a.key) && R(e.key);
+					} else t.loadData && !a.isLeaf && !O.value.has(a.key) && G(a, e);
+					break;
+				case "ArrowLeft":
+					if (e.preventDefault(), a.hasChildren && w.value.has(a.key)) G(a, e);
+					else if (a.parentKeys.length > 0) {
+						let e = a.parentKeys[a.parentKeys.length - 1];
+						R(e);
+					}
+					break;
+				case "Home":
+					e.preventDefault(), Q(-1);
+					break;
+				case "End":
+					e.preventDefault(), Q(1);
+					break;
+				case "Enter":
+				case " ": {
+					e.preventDefault();
+					let n = new MouseEvent("click");
+					t.checkable ? J(a, n) : q(a, n);
+					break;
+				}
+			}
+		}, De = (e) => typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/(["\\])/g, "\\$1"), Oe = () => {
+			let e = L.value;
+			if (e === void 0) return;
+			let t = V.value.get(e);
+			t !== void 0 && (H.value ? U.scrollToIndex(t, B.value) : z.value && z.value.querySelector(`[data-key="${De(String(e))}"]`)?.focus({ preventScroll: !1 }));
+		};
+		return c(L, () => {
+			r(Oe);
+		}), i(() => {
+			Y(), X();
+		}), u({
+			retryLoad: K,
+			isNodeLoading: (e) => D.value.has(e),
+			hasLoadError: (e) => k.value.has(e)
+		}), () => {
+			let e = [
+				p.b(),
+				t.disabled && p.m("disabled"),
+				t.showLine && p.m("show-line"),
+				t.draggable && p.m("draggable"),
+				t.classNames?.root
+			], r = t.styles?.root;
+			if (E.value.length === 0) return n("div", {
+				ref: z,
+				class: e,
+				style: r,
+				role: "tree",
+				onKeydown: $
+			}, n("div", { class: p.e("empty") }, "No data"));
+			if (H.value) {
+				let i = U.visible.value.map(({ data: e, top: n }) => Te(e, {
+					position: "absolute",
+					top: `${n}px`,
+					left: 0,
+					right: 0,
+					height: `${t.virtualItemHeight}px`
+				}));
+				return n("div", {
+					ref: z,
+					class: e,
+					style: r,
+					role: "tree",
+					onKeydown: $
+				}, n("div", {
+					ref: B,
+					class: p.e("virtual"),
+					style: {
+						height: `${U.containerHeight.value}px`,
+						overflow: "auto",
+						position: "relative"
+					},
+					onScroll: U.onScroll
+				}, n("div", { style: {
+					height: `${U.totalHeight.value}px`,
+					position: "relative"
+				} }, i)));
+			}
+			return n("div", {
+				ref: z,
+				class: e,
+				style: r,
+				role: "tree",
+				onKeydown: $,
+				tabindex: L.value === void 0 ? 0 : -1
+			}, E.value.map((e) => Te(e)));
+		};
+	}
+});
+//#endregion
+//#region ../ccui/ui/tree/index.ts
+S.install = function(e) {
+	e.component(S.name, S);
+};
+var C = {
+	title: "Tree 树",
+	category: "数据展示",
+	status: "100%",
+	install(e) {
+		e.component(S.name, S);
+	}
+};
+//#endregion
+export { S as Tree, C as default };