@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/display/Tree.js

@@ -0,0 +1,645 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang, useTextMatcher } from "../config/context.js";
+import { mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "../base/Icon.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { Spinner } from "../base/Spinner.js";
+import { disclosureStyles } from "../utils/style/transitions.js";
+import { startMove } from "../utils/dom/move.js";
+import { inlineArrows, isRtl } from "../utils/dom/direction.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { announce } from "../utils/dom/announcer.js";
+import { toneFillStyles } from "../utils/style/tone-styles.js";
+import { toggleSelection } from "../utils/data/selection.js";
+import "../utils/style/shimmer.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { Empty } from "../feedback/Empty.js";
+import { createTypeahead } from "../utils/dom/typeahead.js";
+import { choiceInputStyles, choiceRecipe } from "../input/choice-styles.js";
+import { checkboxStyles } from "../input/Checkbox.js";
+import { checkStates, filterTree, flattenTree, indexTree, toggleChecked, useTreeExpansion } from "../utils/data/tree.js";
+import { itemStyles } from "../utils/style/item-styles.js";
+import { defaultRangeExtractor } from "../utils/virtual/virtualizer.js";
+import { useVirtualizer } from "../utils/virtual/use-virtualizer.js";
+import { computed, createVNode, mergeProps, onScopeDispose, ref, shallowRef, useId, watch } from "vue";
+import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Check, ChevronRight, Minus } from "@lucide/icons";
+//#region src/display/Tree.tsx
+/**
+* 树（WAI-ARIA Tree）：可展开的层级列表（文件夹、组织架构、分类），可单选 / 多选、勾选（父子联动、半选）、懒加载子节点。
+* 数据驱动，始终虚拟滚动（上万个节点也只渲染看得见的几十个）：
+*
+*   <Tree
+*     items={folders}
+*     getKey={(node) => node.id}
+*     getLabel={(node) => node.name}
+*     getChildren={(node) => node.children}
+*     _expanded={open}
+*     selectionMode="single"
+*     _selected={current}
+*     aria-label="目录"
+*   />
+*
+* - 键盘：焦点在树上，当前项经 aria-activedescendant 告诉读屏。↑↓ 移动，→ 展开 / 进入第一个子节点，← 收起 / 回到父节点，
+*   Home / End，Enter 选中（没有选择时展开或收起），空格勾选（checkable 时）或选中，按字母跳到以它开头的节点。
+* - 勾选：checkable 时每项前有勾选框，_checked={keys} 是勾上的全部节点；勾上父节点会勾上它的子孙，
+*   子节点全勾上时父节点也勾上，只勾了一部分时父节点半选（aria-checked="mixed"）。
+* - 懒加载：hasChildren 说有子节点、getChildren 还没有时，展开会调用 loadChildren（加载中显示加载指示）。
+* - 节点平铺渲染（虚拟滚动没法嵌套 role="group"），层级经 aria-level / aria-setsize / aria-posinset 告诉读屏。
+*
+* 展开状态与勾选联动见 utils/data/tree.ts（TreeDataTable 共用）。部件：Root（div，role="tree"）、
+* Row（虚拟滚动定位的一行，包着 Item）、Item（div，role="treeitem"）、Toggle（展开箭头）、
+* Checkbox（勾选框，只是外观，状态在 treeitem 的 aria-checked 上）、Label、ScrollArea（外层的滚动区域）。
+*/
+/** 节点的渲染状态 */
+/** 一次移动：把 key 移到 target（交给 moveNode） */
+/** 拖动时的落点：放在 key 这一项的前面、后面或里面 */
+/** 未声明的属性落到 div（role="tree"）上；aria-label 或 aria-labelledby 是树的名称 */
+/** Tree 的样式：root、sizer、row、item、toggle、checkbox、label 等 */
+var treeStyles = css.create({
+	root: {
+		position: "relative",
+		overscrollBehavior: "contain",
+		padding: "_xs",
+		outlineStyle: "none"
+	},
+	sizer: {
+		position: "relative",
+		width: "_full"
+	},
+	skeleton: {
+		display: "block",
+		height: "1em",
+		marginBlock: "0.625em",
+		marginInline: "_sm"
+	},
+	row: {
+		position: "absolute",
+		top: 0,
+		insetInline: 0,
+		paddingBlock: "1px"
+	},
+	item: {
+		gap: "_xs",
+		minHeight: "_sizes.minTarget",
+		paddingInlineStart: "_xs"
+	},
+	toggle: {
+		display: "grid",
+		placeItems: "center",
+		flexShrink: 0,
+		width: "1.5em",
+		height: "1.5em",
+		color: "_textMuted"
+	},
+	chevronOpen: { rotate: "90deg" },
+	checkbox: { marginInlineEnd: "_xs" },
+	checkMark: {
+		width: "0.875em",
+		height: "0.875em",
+		color: "_accentContrast"
+	},
+	hidden: { visibility: "hidden" },
+	matched: { fontWeight: "_semibold" },
+	dragging: { opacity: .5 },
+	dropInside: {
+		outlineStyle: "solid",
+		outlineWidth: "_borderWidths.sm",
+		outlineColor: "_accent",
+		outlineOffset: `calc(-1 * ${t.borderWidths.sm})`,
+		backgroundColor: "_accentSoft"
+	},
+	dropLine: {
+		position: "absolute",
+		insetInlineEnd: 0,
+		height: "_borderWidths.sm",
+		backgroundColor: "_accent",
+		borderRadius: "_full",
+		pointerEvents: "none"
+	},
+	dropBefore: { top: `calc(-1 * ${t.borderWidths.xs})` },
+	dropAfter: { bottom: `calc(-1 * ${t.borderWidths.xs})` },
+	positioned: { position: "relative" }
+});
+/** Tree 的样式：indent（缩进）、y、height */
+var treeDynamicStyles = css.create({
+	indent: (em) => ({
+		width: `${em}em`,
+		flexShrink: 0
+	}),
+	y: (px) => ({ transform: `translateY(${px}px)` }),
+	height: (px) => ({ height: px }),
+	width: (value) => ({ width: value }),
+	lineStart: (em) => ({ insetInlineStart: `${em}em` })
+});
+/** 加载中显示几行骨架 */
+var SKELETON_ROWS = 4;
+var ARIA_CHECKED = {
+	checked: "true",
+	unchecked: "false",
+	indeterminate: "mixed"
+};
+/** 树：可展开的层级列表，单选 / 多选、父子联动的勾选、懒加载、方向键导航、虚拟滚动 */
+var Tree = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = readonlyProp(_props, "items");
+	const getKey = readonlyProp(_props, "getKey");
+	const getLabel = readonlyProp(_props, "getLabel");
+	const getChildren = readonlyProp(_props, "getChildren");
+	const hasChildren = readonlyProp(_props, "hasChildren");
+	const loadChildren = readonlyProp(_props, "loadChildren");
+	const onLoadError = readonlyProp(_props, "onLoadError");
+	const isDisabled = readonlyProp(_props, "isDisabled");
+	const getIcon = readonlyProp(_props, "getIcon");
+	const expanded = bindable(_props, "_expanded", () => [], _ctx.emit);
+	const selectionMode = readonlyProp(_props, "selectionMode");
+	const selected = bindable(_props, "_selected", () => [], _ctx.emit);
+	const checkable = readonlyProp(_props, "checkable", false);
+	const checkStrictly = readonlyProp(_props, "checkStrictly", false);
+	const checked = bindable(_props, "_checked", () => [], _ctx.emit);
+	const loading = readonlyProp(_props, "loading", false);
+	const empty = readonlyProp(_props, "empty");
+	const indent = readonlyProp(_props, "indent", 1.25);
+	const estimateSize = readonlyProp(_props, "estimateSize", 32);
+	const filter = readonlyProp(_props, "filter");
+	const onMove = readonlyProp(_props, "onMove");
+	const canDrop = readonlyProp(_props, "canDrop");
+	const renderItem = readonlyProp(_props, "renderItem");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsRow = readonlyProp(_props, "propsRow");
+	const propsToggle = readonlyProp(_props, "propsToggle");
+	const propsCheckbox = readonlyProp(_props, "propsCheckbox");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsEmpty = readonlyProp(_props, "propsEmpty");
+	const propsSkeleton = readonlyProp(_props, "propsSkeleton");
+	const propsScrollArea = readonlyProp(_props, "propsScrollArea");
+	const id = readonlyProp(_props, "id");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const indicator = useDelayedLoading(() => loading.value);
+	const generatedId = useId();
+	const prefix = () => id.value ?? generatedId;
+	let root = shallowRef(null);
+	let sizer = shallowRef(null);
+	let active = ref(void 0);
+	let focused = ref(false);
+	const typeahead = createTypeahead();
+	const choice = useRecipe(choiceRecipe);
+	const accessors = () => ({
+		getKey: (node) => getKey.value(node),
+		getChildren: getChildren.value,
+		hasChildren: hasChildren.value
+	});
+	const textMatcher = useTextMatcher();
+	const filtering = computed(() => {
+		const query = typeof filter.value === "string" ? filter.value.trim() : filter.value;
+		if (!query) return null;
+		const match = typeof query === "string" ? (node) => textMatcher()(getLabel.value(node), query) : query;
+		return filterTree(items.value, accessors(), match);
+	});
+	let filterExpanded = ref([]);
+	watch(() => filtering.value, (result) => filterExpanded.value = result ? [...result.expand] : [], { immediate: true });
+	const shownExpanded = () => filtering.value ? filterExpanded.value : expanded.value;
+	const expansion = useTreeExpansion({
+		expanded: shownExpanded,
+		setExpanded: (keys) => filtering.value ? filterExpanded.value = keys : expanded.value = keys,
+		getChildren: (node) => getChildren.value(node),
+		loadChildren: (node) => loadChildren.value?.(node),
+		onLoadError: untrack(() => onLoadError.value) && ((error, node) => onLoadError.value?.(error, node))
+	});
+	const rows = computed(() => flattenTree(items.value, accessors(), new Set(shownExpanded()), { include: filtering.value?.include }));
+	const rowOf = computed(() => new Map(rows.value.map((row, index) => [row.key, index])));
+	const index = computed(() => checkable.value && !checkStrictly.value ? indexTree(items.value, accessors()) : null);
+	const states = computed(() => index.value ? checkStates(index.value, checked.value) : null);
+	const checkedSet = computed(() => new Set(checked.value));
+	const selectedSet = computed(() => new Set(selected.value));
+	/** 当前项的行号；没有时 -1 */
+	const activeRow = () => active.value === void 0 ? -1 : rowOf.value.get(active.value) ?? -1;
+	const virtual = useVirtualizer(() => {
+		const current = rows.value;
+		const focusedRow = activeRow();
+		const size = estimateSize.value;
+		return {
+			count: current.length,
+			scrollElement: root.value,
+			list: sizer.value,
+			estimateSize: () => size,
+			getItemKey: (position) => current[position].key,
+			overscan: 6,
+			rangeExtractor: (range) => {
+				const indices = defaultRangeExtractor(range);
+				if (focusedRow >= 0 && !indices.includes(focusedRow)) {
+					indices.push(focusedRow);
+					indices.sort((a, b) => a - b);
+				}
+				return indices;
+			}
+		};
+	});
+	watch(() => active.value, () => {
+		const position = activeRow();
+		if (position >= 0) virtual.scrollToIndex(position, { align: "auto" });
+	}, { flush: "post" });
+	watch(() => rows.value, (next, previous) => {
+		if (active.value === void 0 || rowOf.value.has(active.value)) return;
+		let parent = previous.find((row) => row.key === active.value)?.parent;
+		while (parent !== void 0 && !rowOf.value.has(parent)) parent = previous.find((row) => row.key === parent)?.parent;
+		active.value = parent ?? next[0]?.key;
+	});
+	const disabledAt = (position) => {
+		const row = rows.value[position];
+		return !row || (isDisabled.value?.(row.node) ?? false);
+	};
+	function select(position) {
+		const row = rows.value[position];
+		if (!row || !selectionMode.value || disabledAt(position)) return;
+		selected.value = [...toggleSelection(selected.value, row.key, { mode: selectionMode.value })];
+	}
+	function check(position) {
+		const row = rows.value[position];
+		if (!row || !checkable.value || disabledAt(position)) return;
+		checked.value = index.value ? toggleChecked(index.value, checked.value, row.key) : [...toggleSelection(checked.value, row.key, { mode: "multiple" })];
+	}
+	function toggle(position) {
+		const row = rows.value[position];
+		if (row?.expandable) expansion.setOpen(row.node, row.key, !expansion.isExpanded(row.key));
+	}
+	let dragging = ref(void 0);
+	let drop = shallowRef(null);
+	let expandTimer;
+	let stopDrag;
+	onScopeDispose(() => {
+		clearTimeout(expandTimer);
+		stopDrag?.();
+	});
+	const rowByKey = (key) => key === void 0 ? void 0 : rows.value[rowOf.value.get(key) ?? -1];
+	/** key 是不是 ancestor 自己或它的子孙（看得见的行里，祖先总是看得见的） */
+	function isWithin(key, ancestor) {
+		for (let at = key; at !== void 0; at = rowByKey(at)?.parent) if (at === ancestor) return true;
+		return false;
+	}
+	/** 落点换算成移动的目标（按移走之后的同级算）；放不下时 null */
+	function targetOf(key, spot) {
+		const moving = rowByKey(key);
+		const row = rowByKey(spot.key);
+		if (!moving || !row || isWithin(spot.key, key)) return null;
+		let target;
+		if (spot.zone === "inside") target = {
+			parent: row.key,
+			index: Number.MAX_SAFE_INTEGER
+		};
+		else {
+			const offset = spot.zone === "before" ? row.position - 1 : row.position;
+			const shift = moving.parent === row.parent && moving.position <= offset ? 1 : 0;
+			target = {
+				parent: row.parent,
+				index: offset - shift
+			};
+		}
+		return canDrop.value && !canDrop.value(moving.node, target) ? null : target;
+	}
+	/** 报告移动，并告诉读屏移到了哪里 */
+	function emitMove(key, target) {
+		const row = rowByKey(key);
+		if (!row || !onMove.value) return;
+		const parent = rowByKey(target.parent);
+		const count = (parent ? getChildren.value(parent.node)?.length ?? 0 : items.value.length) - (row.parent === target.parent ? 1 : 0);
+		onMove.value({
+			key,
+			node: row.node,
+			target
+		});
+		announce(lang.treeMoved(getLabel.value(row.node), parent && getLabel.value(parent.node), Math.min(target.index, count) + 1));
+	}
+	/** 指针下的落点：一项的上四分之一放在它前面，下四分之一放在后面，中间放进它里面 */
+	function spotAt(clientX, clientY) {
+		const element = document.elementFromPoint(clientX, clientY)?.closest("[data-index]");
+		if (!element || !root.value?.contains(element)) return null;
+		const row = rows.value[Number(element.dataset.index)];
+		if (!row) return null;
+		const rect = element.getBoundingClientRect();
+		const ratio = (clientY - rect.top) / rect.height;
+		return {
+			key: row.key,
+			zone: ratio < .25 ? "before" : ratio > .75 ? "after" : "inside"
+		};
+	}
+	/** 拖到靠近上下边缘时滚动 */
+	function autoScroll(clientY) {
+		if (!root.value) return;
+		const rect = root.value.getBoundingClientRect();
+		if (clientY < rect.top + 32) root.value.scrollTop -= 12;
+		else if (clientY > rect.bottom - 32) root.value.scrollTop += 12;
+	}
+	/** 拖到收起的节点里停一会儿：展开它，好放到更深的地方 */
+	function scheduleExpand(spot) {
+		clearTimeout(expandTimer);
+		const row = spot?.zone === "inside" ? rowByKey(spot.key) : void 0;
+		if (!row?.expandable || expansion.isExpanded(row.key)) return;
+		expandTimer = setTimeout(() => void expansion.setOpen(row.node, row.key, true), 600);
+	}
+	function onItemPointerdown(event, key) {
+		event.preventDefault();
+		if (!onMove.value || event.pointerType === "touch" || !root.value) return;
+		stopDrag = startMove(event, {
+			threshold: 4,
+			captureTarget: root.value,
+			onMove: ({ clientX, clientY }) => {
+				dragging.value = key;
+				const spot = spotAt(clientX, clientY);
+				autoScroll(clientY);
+				const next = spot && targetOf(key, spot) ? spot : null;
+				if (next?.key === drop.value?.key && next?.zone === drop.value?.zone) return;
+				drop.value = next;
+				scheduleExpand(next);
+			},
+			onEnd: ({ moved, cancelled }) => {
+				const spot = drop.value;
+				dragging.value = void 0;
+				drop.value = null;
+				stopDrag = void 0;
+				clearTimeout(expandTimer);
+				if (!moved || cancelled || !spot) return;
+				const target = targetOf(key, spot);
+				if (target) emitMove(key, target);
+			}
+		});
+	}
+	/** Alt + ↑↓ 在同级里移动，Alt + → 放进上一个同级的最后，Alt + ← 移到父节点后面（从右到左时左右对调） */
+	function moveByKey(event) {
+		const row = rows.value[activeRow()];
+		if (!row) return false;
+		const { forward, backward } = inlineArrows(!!root.value && isRtl(root.value));
+		let target;
+		switch (event.key) {
+			case "ArrowUp":
+				if (row.position > 1) target = {
+					parent: row.parent,
+					index: row.position - 2
+				};
+				break;
+			case "ArrowDown":
+				if (row.position < row.setSize) target = {
+					parent: row.parent,
+					index: row.position
+				};
+				break;
+			case forward: {
+				const previous = rows.value.find((item) => item.parent === row.parent && item.position === row.position - 1);
+				if (!previous) break;
+				target = {
+					parent: previous.key,
+					index: Number.MAX_SAFE_INTEGER
+				};
+				expansion.setOpen(previous.node, previous.key, true);
+				break;
+			}
+			case backward: {
+				const parent = rowByKey(row.parent);
+				if (parent) target = {
+					parent: parent.parent,
+					index: parent.position
+				};
+				break;
+			}
+			default: return false;
+		}
+		if (target && (!canDrop.value || canDrop.value(row.node, target))) emitMove(row.key, target);
+		return true;
+	}
+	function onKeydown(event) {
+		if (event.altKey && onMove.value && !event.ctrlKey && !event.metaKey) {
+			if (moveByKey(event)) event.preventDefault();
+			return;
+		}
+		if (event.altKey || event.ctrlKey || event.metaKey || rows.value.length === 0) return;
+		const position = Math.max(activeRow(), 0);
+		const row = rows.value[position];
+		const open = row.expandable && expansion.isExpanded(row.key);
+		const { forward, backward } = inlineArrows(!!root.value && isRtl(root.value));
+		const go = (target) => active.value = rows.value[target]?.key ?? active.value;
+		switch (event.key) {
+			case "ArrowDown":
+				go(Math.min(position + 1, rows.value.length - 1));
+				break;
+			case "ArrowUp":
+				go(Math.max(position - 1, 0));
+				break;
+			case "Home":
+				go(0);
+				break;
+			case "End":
+				go(rows.value.length - 1);
+				break;
+			case forward:
+				if (!row.expandable) break;
+				if (!open) expansion.setOpen(row.node, row.key, true);
+				else if (rows.value[position + 1]?.parent === row.key) go(position + 1);
+				break;
+			case backward:
+				if (open) expansion.setOpen(row.node, row.key, false);
+				else if (row.parent !== void 0) active.value = row.parent;
+				break;
+			case "Enter":
+				if (selectionMode.value) select(position);
+				else toggle(position);
+				break;
+			case " ":
+				if (checkable.value) check(position);
+				else select(position);
+				break;
+			default: {
+				const found = typeahead.next(event.key, rows.value.map((item) => getLabel.value(item.node)), activeRow());
+				if (found < 0) return;
+				go(found);
+			}
+		}
+		event.preventDefault();
+	}
+	function onFocus() {
+		focused.value = true;
+		if (active.value !== void 0 && rowOf.value.has(active.value)) return;
+		active.value = rows.value.find((row) => selectedSet.value.has(row.key))?.key ?? rows.value[0]?.key;
+	}
+	function renderRow(position) {
+		const row = rows.value[position];
+		const open = row.expandable && expansion.isExpanded(row.key);
+		const disabled = disabledAt(position);
+		const state = {
+			depth: row.depth,
+			expanded: open,
+			selected: selectedSet.value.has(row.key),
+			checked: states.value ? states.value.get(row.key) ?? "unchecked" : checkedSet.value.has(row.key) ? "checked" : "unchecked",
+			active: active.value === row.key
+		};
+		const own = typeof propsItem.value === "function" ? propsItem.value(row.node, state) : propsItem.value;
+		const icon = getIcon.value?.(row.node, open);
+		const loading = expansion.isLoading(row.key);
+		const marked = state.checked !== "unchecked";
+		const box = choice();
+		const dropZone = drop.value?.key === row.key ? drop.value.zone : void 0;
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [
+			itemStyles.row,
+			itemStyles.hoverable,
+			treeStyles.item,
+			focused.value && state.active && itemStyles.highlighted,
+			state.selected && itemStyles.current,
+			disabled && itemStyles.disabled,
+			dragging.value === row.key && treeStyles.dragging,
+			dropZone === "inside" && treeStyles.dropInside,
+			dropZone && dropZone !== "inside" && treeStyles.positioned
+		] }, own, {
+			id: `${prefix()}-${position}`,
+			role: "treeitem",
+			"aria-level": row.depth + 1,
+			"aria-setsize": row.setSize,
+			"aria-posinset": row.position,
+			"aria-expanded": row.expandable ? open : void 0,
+			"aria-selected": selectionMode.value ? state.selected : void 0,
+			"aria-checked": checkable.value ? ARIA_CHECKED[state.checked] : void 0,
+			"aria-disabled": disabled || void 0,
+			"aria-busy": loading || void 0,
+			onPointerdown: (event) => onItemPointerdown(event, row.key),
+			onClick: () => {
+				active.value = row.key;
+				root.value?.focus({ preventScroll: true });
+				if (selectionMode.value) select(position);
+				else if (checkable.value) check(position);
+				else toggle(position);
+			}
+		}), {
+			"data-state": state.selected ? "selected" : void 0,
+			"data-active": state.active || void 0,
+			"data-disabled": disabled || void 0
+		}), [
+			row.depth > 0 && createVNode("span", css.attrs(treeDynamicStyles.indent(row.depth * indent.value)), null),
+			createVNode("span", mergeAttrs({ sx: treeStyles.toggle }, propsToggle.value, {
+				"aria-hidden": true,
+				onClick: (event) => {
+					if (!row.expandable) return;
+					event.stopPropagation();
+					active.value = row.key;
+					root.value?.focus({ preventScroll: true });
+					toggle(position);
+				}
+			}), [loading ? createVNode(Spinner, null, null) : row.expandable && createVNode(Icon, {
+				"icon": ChevronRight,
+				"flipInRtl": true,
+				"sx": [disclosureStyles.icon, open && treeStyles.chevronOpen]
+			}, null)]),
+			checkable.value && createVNode("span", mergeAttrs({ sx: [
+				box.control.sx,
+				toneFillStyles.accent,
+				treeStyles.checkbox
+			] }, propsCheckbox.value, {
+				"aria-hidden": true,
+				onClick: (event) => {
+					event.stopPropagation();
+					active.value = row.key;
+					root.value?.focus({ preventScroll: true });
+					check(position);
+				}
+			}), [createVNode("span", css.attrs(box.input.sx, focusRingStyles.tight, checkboxStyles.box, marked && choiceInputStyles.checked), null), createVNode(Icon, {
+				"icon": state.checked === "indeterminate" ? Minus : Check,
+				"strokeWidth": 3,
+				"sx": [
+					box.indicator.sx,
+					treeStyles.checkMark,
+					!marked && treeStyles.hidden
+				]
+			}, null)]),
+			icon && createVNode(Icon, { "icon": icon }, null),
+			createVNode("span", mergeAttrs({ sx: [itemStyles.label, filtering.value?.matched.has(row.key) && treeStyles.matched] }, propsLabel.value), [renderItem.value ? renderItem.value(row.node, state) : getLabel.value(row.node)]),
+			dropZone && dropZone !== "inside" && createVNode("span", mergeProps({ "aria-hidden": "true" }, css.attrs(treeStyles.dropLine, dropZone === "before" ? treeStyles.dropBefore : treeStyles.dropAfter, treeDynamicStyles.lineStart(row.depth * indent.value + 1.75))), null)
+		]);
+	}
+	/** 没有节点时：加载中是几行骨架，否则是空状态 */
+	function renderPlaceholder() {
+		if (loading.value) {
+			if (!indicator.value) return null;
+			return Array.from({ length: SKELETON_ROWS }, (_, row) => createVNode(Skeleton, mergeProps({ "key": row }, mergePartProps({
+				sx: [treeStyles.skeleton, treeDynamicStyles.width(`${85 - row * 15}%`)],
+				delay: row * 120
+			}, propsSkeleton.value)), null));
+		}
+		return empty.value ?? createVNode(Empty, mergePartProps({
+			size: "sm",
+			icon: false,
+			description: filtering.value ? lang.treeNoMatch : lang.treeEmpty
+		}, propsEmpty.value), null);
+	}
+	return () => {
+		const position = activeRow();
+		return createVNode(ScrollArea, mergeProps(mergePartProps({}, propsScrollArea.value), {
+			"focusable": false,
+			"propsViewport": mergeProps$1({ sx: [treeStyles.root, focusRingStyles.visible] }, rest, {
+				ref: root,
+				id: prefix(),
+				role: "tree",
+				tabindex: rows.value.length > 0 ? 0 : -1,
+				"aria-multiselectable": selectionMode.value === "multiple" || void 0,
+				"aria-activedescendant": position >= 0 ? `${prefix()}-${position}` : void 0,
+				"aria-busy": loading.value || void 0,
+				onFocus,
+				onBlur: () => focused.value = false,
+				onKeydown
+			}),
+			"key": "__site0"
+		}), {
+			default: () => [rows.value.length === 0 && renderPlaceholder(), createVNode("div", mergeProps({
+				"ref": sizer,
+				"role": "presentation"
+			}, css.attrs(treeStyles.sizer, css.bind(treeDynamicStyles.height, () => [virtual.total], true))), [virtual.items.map((item) => createVNode("div", mergeProps({ "key": item.key }, mergeAttrs({ sx: treeStyles.row }, propsRow.value, {
+				ref: virtual.measure,
+				role: "presentation",
+				sx: css.bind(treeDynamicStyles.y, () => [item.start])
+			}), { "data-index": item.index }), [renderRow(item.index)]))])],
+			$stable: true
+		});
+	};
+}, {
+	props: [
+		"items",
+		"getKey",
+		"getLabel",
+		"getChildren",
+		"hasChildren",
+		"loadChildren",
+		"onLoadError",
+		"isDisabled",
+		"getIcon",
+		"_expanded",
+		"onUpdate:_expanded",
+		"selectionMode",
+		"_selected",
+		"onUpdate:_selected",
+		"checkable",
+		"checkStrictly",
+		"_checked",
+		"onUpdate:_checked",
+		"loading",
+		"empty",
+		"indent",
+		"estimateSize",
+		"filter",
+		"onMove",
+		"canDrop",
+		"renderItem",
+		"propsItem",
+		"propsRow",
+		"propsToggle",
+		"propsCheckbox",
+		"propsLabel",
+		"propsEmpty",
+		"propsSkeleton",
+		"propsScrollArea",
+		"id"
+	],
+	name: "Tree"
+});
+//#endregion
+export { Tree, treeDynamicStyles, treeStyles };
+
+//# sourceMappingURL=Tree.js.map