pxd 0.1.2 → 0.1.3

package/dist/components/tree/index.vue

@@ -1,15 +1,12 @@
 <script setup>
-import { computed, shallowRef, useSlots } from "vue";
+import { computed, shallowRef, useSlots, watch } from "vue";
 import { useListKeyboardController } from "../../composables/_internal/use-list-keyboard-controller.js";
 import { useListNavigation } from "../../composables/_internal/use-list-navigation.js";
-import { useTreeDrag } from "../../composables/_internal/use-tree-drag.js";
-import { isTreeDescendant, moveTreeNode } from "../../composables/_internal/use-tree-move.js";
-import { useTreeIndex, useTreeMatched, useTreeRows } from "../../composables/_internal/use-tree-rows.js";
-import { useTreeSelection } from "../../composables/_internal/use-tree-selection.js";
+import { graftLoadedChildren, isTreeDescendant, moveTreeNode, useTreeDrag, useTreeIndex, useTreeMatched, useTreeRows, useTreeSearch, useTreeSelection } from "../../composables/_internal/use-tree.js";
 import { useVirtualList } from "../../composables/use-virtual-list.js";
-import { getElement } from "../../utils/dom.js";
 import { getUniqueId } from "../../utils/helper.js";
 import { isNumber } from "../../utils/is.js";
+import PLoadingMask from "../_internal/loading-mask.vue";
 import PTreeNode from "../_internal/tree-node.vue";
 import PSearchInput from "../search-input/index.vue";
 import PTeleport from "../teleport/index.vue";
@@ -51,7 +48,11 @@ const props = defineProps({
 		required: false,
 		default: false
 	},
-	expandOnClick: {
+	selectable: {
+		type: Function,
+		required: false
+	},
+	expandOnly: {
 		type: Boolean,
 		required: false,
 		default: false
@@ -65,10 +66,10 @@ const props = defineProps({
 		type: Function,
 		required: false
 	},
-	showIcon: {
+	dropInsideLeaf: {
 		type: Boolean,
 		required: false,
-		default: true
+		default: false
 	},
 	virtual: {
 		type: Boolean,
@@ -107,6 +108,20 @@ const props = defineProps({
 		required: false,
 		default: "children"
 	},
+	lazy: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	load: {
+		type: Function,
+		required: false
+	},
+	loading: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
 	filterable: {
 		type: Boolean,
 		required: false,
@@ -116,6 +131,10 @@ const props = defineProps({
 		type: Function,
 		required: false
 	},
+	remoteFilter: {
+		type: Function,
+		required: false
+	},
 	searchMatchesOnly: {
 		type: Boolean,
 		required: false
@@ -159,33 +178,226 @@ const emits = defineEmits([
 	"update:searchValue"
 ]);
 const uid = getUniqueId();
+/** A query still on its way shows no row at all, rather than letting the local filter answer it. */
+const NO_MATCHED = {
+	visible: new Set(),
+	exact: new Set()
+};
+const KEYMAP = {
+	ArrowDown: "next",
+	ArrowUp: "previous",
+	ArrowRight: "enter-child",
+	ArrowLeft: "leave-parent",
+	End: "last",
+	Enter: "activate",
+	Home: "first",
+	" ": "activate"
+};
 const containerRef = shallowRef();
 const internalSearchValue = shallowRef(props.defaultSearchValue ?? "");
-// Controlled when `searchValue` is given, the internal copy otherwise, exactly like expandedKeys.
 const searchValue = computed(() => props.searchValue ?? internalSearchValue.value);
 const internalExpandedKeys = shallowRef([...props.defaultExpandedKeys ?? []]);
-const index = useTreeIndex(() => props.data, () => props.childrenField);
-const matched = useTreeMatched(index, () => searchValue.value, () => props.filter);
-const { checked, indeterminate, toggle } = useTreeSelection({
+const loadedChildren = shallowRef(new Map());
+const loadingKeys = shallowRef(new Set());
+const treeData = computed(() => graftLoadedChildren(props.data, loadedChildren.value, props.childrenField));
+const expandedKeys = computed(() => props.expandedKeys ?? internalExpandedKeys.value);
+const expanded = computed(() => new Set(expandedKeys.value));
+const highlightQuery = computed(() => props.highlightMatch ? searchValue.value.trim() : "");
+const containerStyle = computed(() => {
+	const height = props.height;
+	if (height == null) {
+		return undefined;
+	}
+	return { height: isNumber(height) ? height + "px" : height };
+});
+/** Painted only while focused: a marker on a blurred element lies about where the focus is. */
+const focused = shallowRef(false);
+/** Dragging while a query is active would drop a node relative to an incomplete neighbourhood. */
+const dragEnabled = computed(() => props.draggable && !props.disabled && searchValue.value.trim().length === 0);
+const slots = useSlots();
+const hasNodeSlot = computed(() => !!slots["node-switcher"] || !!slots["node-icon"] || !!slots["node-content"] || !!slots["node-suffix"]);
+const { matches: remoteMatches, remote: remoteMode, pending: searchPending, active: remoteActive } = useTreeSearch({
+	query: () => searchValue.value,
+	remoteFilter: () => props.remoteFilter
+});
+const searchData = computed(() => remoteActive.value ? remoteMatches.value ?? [] : treeData.value);
+const index = useTreeIndex(() => searchData.value, () => props.childrenField);
+const localMatched = useTreeMatched(index, () => searchValue.value, () => props.filter);
+const matched = computed(() => {
+	if (!remoteMode.value) {
+		return localMatched.value;
+	}
+	if (!remoteActive.value) {
+		return NO_MATCHED;
+	}
+	// The whole returned forest shows: an ancestor is as much a hit as the node at the end of it.
+	const visible = new Set(index.value.list.map((meta) => meta.node.value));
+	return {
+		visible,
+		exact: visible
+	};
+});
+const { checked, indeterminate, toggle, extend, isSelectable } = useTreeSelection({
 	index,
 	modelValue: () => props.modelValue,
 	multiple: () => props.multiple,
-	checkStrictly: () => props.checkStrictly
+	checkStrictly: () => props.checkStrictly,
+	selectable: () => props.selectable
 });
-const expandedKeys = computed(() => props.expandedKeys ?? internalExpandedKeys.value);
-const expanded = computed(() => new Set(expandedKeys.value));
 const rows = useTreeRows(index, {
 	query: () => searchValue.value,
 	expanded,
 	matched: () => matched.value.visible,
 	exactMatched: () => matched.value.exact,
-	matchesOnly: () => props.searchMatchesOnly
+	matchesOnly: () => props.searchMatchesOnly,
+	canLoad: () => canLoad
 });
+/** Not `reactive()`: the virtualizer would get a deep proxy of the rows instead of the rows. */
+const virtualOptions = {
+	dataKey: "key",
+	get enabled() {
+		return props.virtual;
+	},
+	get items() {
+		return rows.value;
+	},
+	get itemSize() {
+		return props.itemSize;
+	},
+	get overScan() {
+		return props.overScan;
+	}
+};
 const rowByKey = computed(() => {
 	const result = new Map();
 	rows.value.forEach((row) => result.set(row.key, row));
 	return result;
 });
+const { totalSize, virtualItems, scrollToIndex } = useVirtualList(containerRef, virtualOptions);
+const contentStyle = computed(() => props.virtual ? { height: totalSize.value + "px" } : undefined);
+/** Keyboard only: a pointer-set marker would outlive the pointer and duplicate `checked`. */
+const { activeIndex, dispatch, setActiveIndex } = useListNavigation({
+	count: () => rows.value.length,
+	isDisabled: (index) => isNodeDisabled(rows.value[index]),
+	onActivateItem: (index) => {
+		const row = rows.value[index];
+		if (row) {
+			onCheck(row);
+		}
+	},
+	onRight: (index) => {
+		const row = rows.value[index];
+		if (!row) {
+			return;
+		}
+		if (row.hasChildren && !row.expanded) {
+			setExpandedByValue(row.key, true);
+			return;
+		}
+		if (row.hasChildren && index + 1 < rows.value.length) {
+			setActiveIndex(index + 1);
+			scrollRowIntoView(index + 1);
+		}
+	},
+	onLeft: () => {
+		const row = rows.value[activeIndex.value];
+		if (!row) {
+			return;
+		}
+		if (row.hasChildren && row.expanded) {
+			setExpandedByValue(row.key, false);
+			return;
+		}
+		if (row.parentValue === undefined) {
+			return;
+		}
+		const parentIndex = getRow(row.parentValue)?.index;
+		if (parentIndex === undefined) {
+			return;
+		}
+		setActiveIndex(parentIndex);
+		scrollRowIntoView(parentIndex);
+	},
+	scrollToIndex: scrollRowIntoView
+});
+const activeDescendant = computed(() => activeIndex.value >= 0 ? uid + "-" + activeIndex.value : undefined);
+const renderEntries = computed(() => {
+	if (props.virtual) {
+		return virtualItems.value.flatMap((virtualItem) => {
+			const row = rows.value[virtualItem.index];
+			return row ? [{
+				...row,
+				id: uid + "-" + row.index,
+				start: virtualItem.start,
+				active: focused.value && activeIndex.value === row.index
+			}] : [];
+		});
+	}
+	const entries = [];
+	for (const row of rows.value) {
+		entries.push({
+			...row,
+			id: uid + "-" + row.index,
+			active: focused.value && activeIndex.value === row.index
+		});
+	}
+	return entries;
+});
+const { onKeydown } = useListKeyboardController({
+	keymap: KEYMAP,
+	enabled: () => !props.disabled && !props.loading,
+	onCommand: (command) => dispatch(command)
+});
+const { value: dragValue, target: dropTarget, x: dragX, y: dragY, onPointerDown: onDragPointerdown, didDrag } = useTreeDrag({
+	container: containerRef,
+	rows: () => rows.value,
+	enabled: () => dragEnabled.value,
+	dropInsideLeaf: () => props.dropInsideLeaf,
+	canDrop,
+	onExpand: (value) => {
+		if (getRow(value)?.hasChildren) {
+			setExpandedByValue(value, true);
+		}
+	},
+	onCommit
+});
+const dragNode = computed(() => dragValue.value === undefined ? undefined : index.value.byValue.get(dragValue.value)?.node);
+function canLoad(value) {
+	if (!props.lazy || !props.load || loadedChildren.value.has(value)) {
+		return false;
+	}
+	const meta = index.value.byValue.get(value);
+	return meta !== undefined && meta.node.isLeaf !== true && meta.children.length === 0;
+}
+function commitLoading(value, next) {
+	const keys = new Set(loadingKeys.value);
+	if (next) {
+		keys.add(value);
+	} else {
+		keys.delete(value);
+	}
+	loadingKeys.value = keys;
+}
+/** Reads the open set rather than the click, so a drag hover and a controlled key reach it too. */
+function ensureLoaded(value) {
+	const load = props.load;
+	const meta = index.value.byValue.get(value);
+	if (!load || !meta || loadingKeys.value.has(value) || !canLoad(value)) {
+		return;
+	}
+	const parentValue = meta.parentValue;
+	commitLoading(value, true);
+	load({
+		node: meta.node,
+		depth: meta.depth,
+		parent: parentValue === undefined ? undefined : index.value.byValue.get(parentValue)?.node
+	}, (children) => {
+		commitLoading(value, false);
+		const next = new Map(loadedChildren.value);
+		next.set(value, children);
+		loadedChildren.value = next;
+	}, () => commitLoading(value, false));
+}
 function getRow(value) {
 	return rowByKey.value.get(value);
 }
@@ -233,11 +445,11 @@ function toValues(value) {
 	}
 	return value == null ? [] : [value];
 }
-function onCheck(row) {
-	if (props.disabled || row.node.disabled) {
+function onCheck(row, event) {
+	if (props.disabled || !isSelectable(row.key)) {
 		return;
 	}
-	const next = toggle(row.key);
+	const next = event?.shiftKey ? extend(row.key) : toggle(row.key);
 	const checkedValues = toValues(next.value);
 	emits("update:modelValue", next.value);
 	emits("change", {
@@ -249,39 +461,12 @@ function onCheck(row) {
 	});
 }
 function onSearchInput(value) {
+	if (props.loading) {
+		return;
+	}
 	internalSearchValue.value = value;
 	emits("update:searchValue", value);
 }
-/**
-* A plain getter object, not `reactive()`: `useVirtualList` reads these inside computeds and
-* watchers, which track the getter just the same, while a reactive wrapper would hand the
-* virtualizer a deep proxy of the rows instead of the rows themselves.
-*/
-const virtualOptions = {
-	dataKey: "key",
-	get enabled() {
-		return props.virtual;
-	},
-	get items() {
-		return rows.value;
-	},
-	get itemSize() {
-		return props.itemSize;
-	},
-	get overScan() {
-		return props.overScan;
-	}
-};
-const { totalSize, virtualItems, scrollToIndex } = useVirtualList(containerRef, virtualOptions);
-const highlightQuery = computed(() => props.highlightMatch ? searchValue.value.trim() : "");
-const containerStyle = computed(() => {
-	const height = props.height;
-	if (height == null) {
-		return undefined;
-	}
-	return { height: isNumber(height) ? height + "px" : height };
-});
-const contentStyle = computed(() => props.virtual ? { height: totalSize.value + "px" } : undefined);
 function isNodeDisabled(row) {
 	return props.disabled || row.node.disabled === true;
 }
@@ -293,149 +478,51 @@ function scrollRowIntoView(index) {
 		});
 		return;
 	}
-	const selector = `[data-tree-item][data-index="${index}"]`;
-	getElement(selector, containerRef.value)?.scrollIntoView({
+	const row = containerRef.value?.querySelector(`[data-tree-item][data-index="${index}"]`);
+	row?.scrollIntoView({
 		block: "nearest",
 		behavior: "instant"
 	});
 }
-function isNavDisabled(index) {
-	return isNodeDisabled(rows.value[index]);
+function isDragClick() {
+	return didDrag();
 }
-/**
-* The active row follows the keyboard only. The pointer never sets it: the tree already
-* carries the selection highlight, so a second marker would survive the pointer leaving
-* and duplicate what `checked` already shows.
-*/
-const { activeIndex, dispatch, setActiveIndex } = useListNavigation({
-	count: () => rows.value.length,
-	isDisabled: isNavDisabled,
-	onActivateItem: (index) => {
-		const row = rows.value[index];
-		if (row) {
-			onCheck(row);
-		}
-	},
-	onRight: (index) => {
-		const row = rows.value[index];
-		if (!row) {
-			return;
-		}
-		if (row.hasChildren && !row.expanded) {
-			setExpandedByValue(row.key, true);
-			return;
-		}
-		if (row.hasChildren && index + 1 < rows.value.length) {
-			setActiveIndex(index + 1);
-			scrollRowIntoView(index + 1);
-		}
-	},
-	onLeft: () => {
-		const row = rows.value[activeIndex.value];
-		if (!row) {
-			return;
-		}
-		if (row.hasChildren && row.expanded) {
-			setExpandedByValue(row.key, false);
-			return;
-		}
-		if (row.parentValue === undefined) {
-			return;
-		}
-		const parentIndex = getRow(row.parentValue)?.index;
-		if (parentIndex === undefined) {
-			return;
-		}
-		setActiveIndex(parentIndex);
-		scrollRowIntoView(parentIndex);
-	},
-	scrollToIndex: scrollRowIntoView
-});
-const KEYMAP = {
-	ArrowDown: "next",
-	ArrowUp: "previous",
-	ArrowRight: "enter-child",
-	ArrowLeft: "leave-parent",
-	End: "last",
-	Enter: "activate",
-	Home: "first",
-	" ": "activate"
-};
-const { onKeydown } = useListKeyboardController({
-	keymap: KEYMAP,
-	enabled: () => !props.disabled,
-	onCommand: (command) => dispatch(command)
-});
-/**
-* A focus indicator left on a blurred element lies about where the focus is, so the
-* active row is only painted while the tree holds it. The index itself is kept:
-* tabbing back in resumes on the row the user left from.
-*/
-const focused = shallowRef(false);
-const activeDescendant = computed(() => activeIndex.value >= 0 ? uid + "-" + activeIndex.value : undefined);
-const renderEntries = computed(() => {
-	if (props.virtual) {
-		// Only the window is ever built here: materialising an entry per row would cost more than
-		// the rows the virtual layout shows, and it would redo that on every scroll frame.
-		return virtualItems.value.flatMap((virtualItem) => {
-			const row = rows.value[virtualItem.index];
-			return row ? [{
-				...row,
-				id: uid + "-" + row.index,
-				start: virtualItem.start,
-				active: focused.value && activeIndex.value === row.index
-			}] : [];
-		});
-	}
-	const entries = [];
-	for (const row of rows.value) {
-		entries.push({
-			...row,
-			id: uid + "-" + row.index,
-			active: focused.value && activeIndex.value === row.index
-		});
+function onRowClick(value, event) {
+	if (isDragClick()) {
+		return;
 	}
-	return entries;
-});
-const slots = useSlots();
-/**
-* A row rendered with slot children carries the DYNAMIC_SLOTS patch flag, so it re-renders
-* with every tree update no matter which row changed. Without a node slot the flag stays
-* off and each row is skipped unless one of its own props moved.
-*/
-const hasDragHandle = computed(() => !!slots["node-drag-handle"]);
-/** A drag handle is a node slot too: forwarding it puts every row back on the dynamic path. */
-const hasNodeSlot = computed(() => hasDragHandle.value || !!slots.node || !!slots["node-switcher"] || !!slots["node-icon"] || !!slots["node-content"] || !!slots["node-suffix"]);
-function onRowClick(value) {
 	const row = getRow(value);
 	if (!row) {
 		return;
 	}
-	// The row always selects, in both modes: with a checkbox the row is still the bigger target,
-	// and the keyboard path already selects on Enter/Space, so this keeps the two in step.
-	onCheck(row);
-	if (row.hasChildren && props.expandOnClick) {
-		toggleNode(row);
+	if (props.expandOnly && !event?.shiftKey) {
+		if (row.hasChildren) {
+			toggleNode(row);
+		}
+		if (props.multiple || row.hasChildren) {
+			return;
+		}
 	}
+	onCheck(row, event);
 }
 function onSwitcherClick(value) {
+	if (isDragClick()) {
+		return;
+	}
 	const row = getRow(value);
 	if (row) {
 		toggleNode(row);
 	}
 }
-function onCheckboxClick(value) {
+function onCheckboxClick(value, event) {
+	if (isDragClick()) {
+		return;
+	}
 	const row = getRow(value);
 	if (row) {
-		onCheck(row);
+		onCheck(row, event);
 	}
 }
-function onContainerFocus() {
-	focused.value = true;
-}
-function onContainerBlur() {
-	focused.value = false;
-}
 function scrollToKey(value) {
 	const index = getRow(value)?.index;
 	if (index !== undefined) {
@@ -444,18 +531,14 @@ function scrollToKey(value) {
 }
 function setActiveKey(value) {
 	const at = getRow(value)?.index;
-	// Without the scroll the row can sit outside the virtual window, and aria-activedescendant
-	// would then point at an id nothing in the document carries.
+	// Without the scroll, aria-activedescendant can point at a row outside the virtual window.
 	if (at === undefined) {
 		return;
 	}
 	setActiveIndex(at);
 	scrollRowIntoView(at);
 }
-/**
-* Reads the whole index rather than the rendered rows: a collapsed subtree still holds checked
-* nodes, and this is the same set, in the same document order, that `change` reports.
-*/
+/** The whole index, not the rendered rows: a collapsed subtree still holds checked nodes. */
 function getCheckedKeys(includeIndeterminate = false) {
 	const result = [];
 	for (const meta of index.value.list) {
@@ -469,20 +552,14 @@ function getCheckedKeys(includeIndeterminate = false) {
 function getVisibleKeys() {
 	return rows.value.map((row) => row.key);
 }
-/**
-* A search hides whole subtrees, so a row only tells you where it sits among what is left.
-* Dragging while a query is active would drop a node relative to an incomplete neighbourhood.
-*/
-const dragEnabled = computed(() => props.draggable && !props.disabled && searchValue.value.trim().length === 0);
 function canDrop(value, targetValue, position) {
 	const meta = index.value.byValue.get(targetValue);
 	const dragNode = index.value.byValue.get(value)?.node;
-	// Structural: a node can never land on itself or inside its own subtree.
-	if (!meta || !dragNode || targetValue === value || isTreeDescendant(index.value, value, targetValue)) {
+	// Structural: never on itself or inside its own subtree, and never inside an unloaded parent —
+	// the tree a drop proposes would lose the subtree nobody has seen yet.
+	if (!meta || !dragNode || targetValue === value || isTreeDescendant(index.value, value, targetValue) || position === "inside" && canLoad(targetValue)) {
 		return false;
 	}
-	// Policy: `allow-drop` takes it over, so a consumer can allow what the tree forbids by
-	// default (a disabled target) and forbid what it would otherwise allow.
 	if (props.allowDrop) {
 		return props.allowDrop({
 			dragValue: value,
@@ -494,31 +571,28 @@ function canDrop(value, targetValue, position) {
 	}
 	return meta.node.disabled !== true;
 }
-const { value: dragValue, target: dropTarget, x: dragX, y: dragY, onPointerDown: onDragPointerdown } = useTreeDrag({
-	container: containerRef,
-	rows: () => rows.value,
-	enabled: () => dragEnabled.value,
-	canDrop,
-	onExpand: (value) => setExpandedByValue(value, true),
-	onCommit
-});
-const dragNode = computed(() => dragValue.value === undefined ? undefined : index.value.byValue.get(dragValue.value)?.node);
-/** The source node behind a key, collapsed subtree included, so callers never lose data the tree hides. */
 function getData(value) {
 	return index.value.byValue.get(value)?.node;
 }
-/**
-* The tree never writes `data` itself: the caller owns it, so a drop only proposes the next
-* tree through `update:data`. A move that resolves to the current shape emits nothing.
-*/
+/** The caller owns `data`: a drop only proposes the next tree, and a no-op move is silent. */
 function onCommit(value, target) {
-	const result = moveTreeNode(props.data, props.childrenField, value, target);
+	// The grafted tree, not the prop: nodes that arrived through `load` live only in there.
+	const result = moveTreeNode(treeData.value, props.childrenField, value, target);
 	if (!result) {
 		return;
 	}
 	emits("update:data", result.data);
 	emits("move", result.detail);
+	if (target.position === "inside") {
+		setExpandedByValue(target.targetValue, true);
+	}
 }
+// `treeData` too: a key below a parent still on its way only becomes loadable once it arrives.
+watch([expanded, treeData], ([keys]) => {
+	for (const value of keys) {
+		ensureLoaded(value);
+	}
+}, { immediate: true });
 defineExpose({
 	focus: () => containerRef.value?.focus(),
 	scrollToKey,
@@ -535,17 +609,13 @@ defineExpose({
 </script>
 
 <template>
-  <!--
-    The filter sits outside the tree on purpose: a text field is not a node, and `role="tree"`
-    owns only `treeitem` content. Keeping it a sibling also leaves it on screen while the tree
-    scrolls.
-  -->
   <div data-tree class="pxd-tree-root w-full max-w-full">
     <div v-if="filterable" data-tree-search class="pxd-tree--search mbe-1">
       <slot name="search">
         <PSearchInput
           :model-value="searchValue"
           :placeholder="searchPlaceholder"
+          :loading="loading || searchPending"
           @update:model-value="onSearchInput"
         />
       </slot>
@@ -555,14 +625,16 @@ defineExpose({
       ref="containerRef"
       role="tree"
       tabindex="0"
-      class="pxd-tree m-0 p-1 scroll-p-1 w-full max-w-full overflow-auto rounded-inherit bg-background-100 outline-none"
+      class="pxd-tree m-0 relative w-full max-w-full overflow-auto rounded-inherit bg-background-100 outline-none"
+      :class="{ 'min-h-22': loading && !rows.length }"
       :style="containerStyle"
+      :aria-busy="loading"
       :aria-multiselectable="multiple || void 0"
       :aria-activedescendant="focused ? activeDescendant : void 0"
       v-bind="$attrs"
       @keydown="onKeydown"
-      @focus="onContainerFocus"
-      @blur="onContainerBlur"
+      @focus="focused = true"
+      @blur="focused = false"
     >
       <div class="pxd-tree--content w-full" :class="{ relative: virtual }" :style="contentStyle">
         <div
@@ -582,6 +654,7 @@ defineExpose({
             :index="entry.index"
             :has-children="entry.hasChildren"
             :expanded="entry.expanded"
+            :loading="loadingKeys.has(entry.key)"
             :checked="checked.has(entry.key)"
             :indeterminate="indeterminate.has(entry.key)"
             :active="entry.active"
@@ -589,11 +662,10 @@ defineExpose({
             :disabled="disabled"
             :set-size="rows.length"
             :indent="indent"
+            :selectable="isSelectable(entry.key)"
             :highlight-query="highlightQuery"
-            :show-icon="showIcon"
             :item-class="itemClass"
             :draggable="dragEnabled"
-            :drag-handle="hasDragHandle"
             :dragging="entry.key === dragValue"
             :drop-position="dropTarget?.targetValue === entry.key ? dropTarget.position : void 0"
             @row-click="onRowClick"
@@ -601,10 +673,6 @@ defineExpose({
             @check="onCheckboxClick"
             @toggle="onSwitcherClick"
           >
-            <template #node="scope">
-              <slot name="node" v-bind="scope" />
-            </template>
-
             <template #node-switcher="scope">
               <slot name="node-switcher" v-bind="scope" />
             </template>
@@ -620,10 +688,6 @@ defineExpose({
             <template #node-suffix="scope">
               <slot name="node-suffix" v-bind="scope" />
             </template>
-
-            <template #node-drag-handle="scope">
-              <slot name="node-drag-handle" v-bind="scope" />
-            </template>
           </PTreeNode>
 
           <PTreeNode
@@ -635,6 +699,7 @@ defineExpose({
             :index="entry.index"
             :has-children="entry.hasChildren"
             :expanded="entry.expanded"
+            :loading="loadingKeys.has(entry.key)"
             :checked="checked.has(entry.key)"
             :indeterminate="indeterminate.has(entry.key)"
             :active="entry.active"
@@ -642,11 +707,10 @@ defineExpose({
             :disabled="disabled"
             :set-size="rows.length"
             :indent="indent"
+            :selectable="isSelectable(entry.key)"
             :highlight-query="highlightQuery"
-            :show-icon="showIcon"
             :item-class="itemClass"
             :draggable="dragEnabled"
-            :drag-handle="hasDragHandle"
             :dragging="entry.key === dragValue"
             :drop-position="dropTarget?.targetValue === entry.key ? dropTarget.position : void 0"
             @row-click="onRowClick"
@@ -657,9 +721,11 @@ defineExpose({
         </div>
       </div>
 
+      <PLoadingMask v-if="loading" />
+
       <div
-        v-if="!rows.length"
-        class="pxd-tree--empty py-7 text-sm text-center text-foreground-secondary"
+        v-else-if="!rows.length"
+        class="pxd-tree--empty py-8.5 text-sm text-center text-foreground-secondary"
       >
         <slot name="empty" />
       </div>
@@ -668,6 +734,7 @@ defineExpose({
     <PTeleport to="body">
       <div
         v-if="dragValue !== void 0"
+        aria-hidden="true"
         class="pxd-tree--drag-preview px-2 py-1 text-sm shadow-lg pointer-events-none fixed z-50 rounded-md border border-gray-300 bg-background-100 text-foreground"
         :style="{ left: dragX + 'px', top: dragY + 'px' }"
       >