pxd 0.0.64 → 0.1.2

package/dist/components/tree/index.vue

@@ -0,0 +1,684 @@
+<script setup>
+import { computed, shallowRef, useSlots } 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 { 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 PTreeNode from "../_internal/tree-node.vue";
+import PSearchInput from "../search-input/index.vue";
+import PTeleport from "../teleport/index.vue";
+defineOptions({
+	name: "PTree",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	data: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Array,
+			null
+		],
+		required: false
+	},
+	multiple: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	checkStrictly: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	expandOnClick: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	draggable: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	allowDrop: {
+		type: Function,
+		required: false
+	},
+	showIcon: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	virtual: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	itemSize: {
+		type: Number,
+		required: false,
+		default: 32
+	},
+	overScan: {
+		type: Number,
+		required: false,
+		default: 4
+	},
+	height: {
+		type: [Number, String],
+		required: false
+	},
+	indent: {
+		type: Number,
+		required: false,
+		default: 16
+	},
+	expandedKeys: {
+		type: Array,
+		required: false
+	},
+	defaultExpandedKeys: {
+		type: Array,
+		required: false
+	},
+	childrenField: {
+		type: String,
+		required: false,
+		default: "children"
+	},
+	filterable: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	filter: {
+		type: Function,
+		required: false
+	},
+	searchMatchesOnly: {
+		type: Boolean,
+		required: false
+	},
+	highlightMatch: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	searchPlaceholder: {
+		type: String,
+		required: false,
+		default: "Search"
+	},
+	searchValue: {
+		type: String,
+		required: false
+	},
+	defaultSearchValue: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	itemClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	}
+});
+const emits = defineEmits([
+	"update:modelValue",
+	"update:data",
+	"move",
+	"change",
+	"update:expandedKeys",
+	"expand",
+	"collapse",
+	"update:searchValue"
+]);
+const uid = getUniqueId();
+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({
+	index,
+	modelValue: () => props.modelValue,
+	multiple: () => props.multiple,
+	checkStrictly: () => props.checkStrictly
+});
+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
+});
+const rowByKey = computed(() => {
+	const result = new Map();
+	rows.value.forEach((row) => result.set(row.key, row));
+	return result;
+});
+function getRow(value) {
+	return rowByKey.value.get(value);
+}
+function commitExpandedKeys(next) {
+	internalExpandedKeys.value = next;
+	emits("update:expandedKeys", next);
+}
+function setExpandedByValue(value, next) {
+	if (expanded.value.has(value) === next) {
+		return;
+	}
+	const current = expandedKeys.value;
+	commitExpandedKeys(next ? [...current, value] : current.filter((key) => key !== value));
+	const node = index.value.byValue.get(value)?.node;
+	if (!node) {
+		return;
+	}
+	if (next) {
+		emits("expand", {
+			value,
+			node
+		});
+		return;
+	}
+	emits("collapse", {
+		value,
+		node
+	});
+}
+function toggleNode(row) {
+	if (!row.hasChildren) {
+		return;
+	}
+	setExpandedByValue(row.key, !row.expanded);
+}
+function expandAll() {
+	commitExpandedKeys(index.value.list.filter((meta) => meta.children.length > 0).map((meta) => meta.node.value));
+}
+function collapseAll() {
+	commitExpandedKeys([]);
+}
+function toValues(value) {
+	if (Array.isArray(value)) {
+		return value;
+	}
+	return value == null ? [] : [value];
+}
+function onCheck(row) {
+	if (props.disabled || row.node.disabled) {
+		return;
+	}
+	const next = toggle(row.key);
+	const checkedValues = toValues(next.value);
+	emits("update:modelValue", next.value);
+	emits("change", {
+		value: row.key,
+		node: row.node,
+		checked: checkedValues.includes(row.key),
+		checkedValues,
+		halfCheckedValues: next.halfCheckedValues
+	});
+}
+function onSearchInput(value) {
+	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;
+}
+function scrollRowIntoView(index) {
+	if (props.virtual) {
+		scrollToIndex(index, {
+			align: "auto",
+			behavior: "instant"
+		});
+		return;
+	}
+	const selector = `[data-tree-item][data-index="${index}"]`;
+	getElement(selector, containerRef.value)?.scrollIntoView({
+		block: "nearest",
+		behavior: "instant"
+	});
+}
+function isNavDisabled(index) {
+	return isNodeDisabled(rows.value[index]);
+}
+/**
+* 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
+		});
+	}
+	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);
+	}
+}
+function onSwitcherClick(value) {
+	const row = getRow(value);
+	if (row) {
+		toggleNode(row);
+	}
+}
+function onCheckboxClick(value) {
+	const row = getRow(value);
+	if (row) {
+		onCheck(row);
+	}
+}
+function onContainerFocus() {
+	focused.value = true;
+}
+function onContainerBlur() {
+	focused.value = false;
+}
+function scrollToKey(value) {
+	const index = getRow(value)?.index;
+	if (index !== undefined) {
+		scrollRowIntoView(index);
+	}
+}
+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.
+	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.
+*/
+function getCheckedKeys(includeIndeterminate = false) {
+	const result = [];
+	for (const meta of index.value.list) {
+		const value = meta.node.value;
+		if (checked.value.has(value) || includeIndeterminate && indeterminate.value.has(value)) {
+			result.push(value);
+		}
+	}
+	return result;
+}
+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)) {
+		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,
+			dragNode,
+			targetValue,
+			targetNode: meta.node,
+			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.
+*/
+function onCommit(value, target) {
+	const result = moveTreeNode(props.data, props.childrenField, value, target);
+	if (!result) {
+		return;
+	}
+	emits("update:data", result.data);
+	emits("move", result.detail);
+}
+defineExpose({
+	focus: () => containerRef.value?.focus(),
+	scrollToKey,
+	setActiveKey,
+	expandKey: (value) => setExpandedByValue(value, true),
+	collapseKey: (value) => setExpandedByValue(value, false),
+	expandAll,
+	collapseAll,
+	getCheckedKeys,
+	getVisibleKeys,
+	getData,
+	activeIndex
+});
+</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"
+          @update:model-value="onSearchInput"
+        />
+      </slot>
+    </div>
+
+    <div
+      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"
+      :style="containerStyle"
+      :aria-multiselectable="multiple || void 0"
+      :aria-activedescendant="focused ? activeDescendant : void 0"
+      v-bind="$attrs"
+      @keydown="onKeydown"
+      @focus="onContainerFocus"
+      @blur="onContainerBlur"
+    >
+      <div class="pxd-tree--content w-full" :class="{ relative: virtual }" :style="contentStyle">
+        <div
+          v-for="entry in renderEntries"
+          :key="entry.key"
+          :data-checked="checked.has(entry.key)"
+          class="pxd-tree--row w-full"
+          :class="{ 'left-0 top-0 absolute': virtual }"
+          :style="virtual ? { transform: 'translateY(' + entry.start + 'px)' } : void 0"
+        >
+          <PTreeNode
+            v-if="hasNodeSlot"
+            :id="entry.id"
+            :node="entry.node"
+            :value="entry.key"
+            :depth="entry.depth"
+            :index="entry.index"
+            :has-children="entry.hasChildren"
+            :expanded="entry.expanded"
+            :checked="checked.has(entry.key)"
+            :indeterminate="indeterminate.has(entry.key)"
+            :active="entry.active"
+            :multiple="multiple"
+            :disabled="disabled"
+            :set-size="rows.length"
+            :indent="indent"
+            :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"
+            @drag-pointerdown="onDragPointerdown"
+            @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>
+
+            <template #node-icon="scope">
+              <slot name="node-icon" v-bind="scope" />
+            </template>
+
+            <template #node-content="scope">
+              <slot name="node-content" v-bind="scope" />
+            </template>
+
+            <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
+            v-else
+            :id="entry.id"
+            :node="entry.node"
+            :value="entry.key"
+            :depth="entry.depth"
+            :index="entry.index"
+            :has-children="entry.hasChildren"
+            :expanded="entry.expanded"
+            :checked="checked.has(entry.key)"
+            :indeterminate="indeterminate.has(entry.key)"
+            :active="entry.active"
+            :multiple="multiple"
+            :disabled="disabled"
+            :set-size="rows.length"
+            :indent="indent"
+            :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"
+            @drag-pointerdown="onDragPointerdown"
+            @check="onCheckboxClick"
+            @toggle="onSwitcherClick"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="!rows.length"
+        class="pxd-tree--empty py-7 text-sm text-center text-foreground-secondary"
+      >
+        <slot name="empty" />
+      </div>
+    </div>
+
+    <PTeleport to="body">
+      <div
+        v-if="dragValue !== void 0"
+        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' }"
+      >
+        <slot name="node-drag-preview" :node="dragNode">
+          {{ dragNode?.label }}
+        </slot>
+      </div>
+    </PTeleport>
+  </div>
+</template>
+
+<style>
+.pxd-tree--row[data-checked=true]+.pxd-tree--row[data-checked=true]>.pxd-tree--node{border-top-left-radius:0;border-top-right-radius:0}.pxd-tree--row[data-checked=true]:has(+.pxd-tree--row[data-checked=true])>.pxd-tree--node{border-bottom-left-radius:0;border-bottom-right-radius:0}
+</style>