@v-c/tree 1.0.0 → 1.0.2

package/dist/Tree.js

@@ -1,7 +1,7 @@
 import DropIndicator_default from "./DropIndicator.js";
 import { TreeContextKey } from "./contextTypes.js";
 import getEntity from "./utils/keyUtil.js";
-import { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getTreeNodeProps, warningWithoutKey } from "./utils/treeUtil.js";
+import { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getTreeNodeProps, isLeafNode, warningWithoutKey } from "./utils/treeUtil.js";
 import NodeList_default, { MOTION_KEY, MotionEntity } from "./NodeList.js";
 import { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, parseCheckedKeys, posToArr } from "./util.js";
 import { conductCheck } from "./utils/conductUtil.js";
@@ -151,7 +151,6 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 	});
 	const [loadedKeys, setLoadedKeys] = useMergedState(() => [], { value: computed(() => props.loadedKeys === void 0 ? void 0 : props.loadedKeys) });
 	const loadingKeys = ref([]);
-	const focused = ref(false);
 	const listChanging = ref(false);
 	const [activeKey, setActiveKey] = useMergedState(null, { value: computed(() => props.activeKey === void 0 ? void 0 : props.activeKey) });
 	function onListChangeStart() {
@@ -178,6 +177,7 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 	const delayedDragEnterLogic = {};
 	const loadingRetryTimes = {};
 	const listRef = ref();
+	let focusFromMouse = false;
 	const getTreeNodeRequiredProps = computed(() => ({
 		expandedKeys: expandedKeys.value || [],
 		selectedKeys: selectedKeys.value || [],
@@ -219,11 +219,22 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 		onActiveChange(item ? item.key : null);
 	}
 	function onFocus(e) {
-		focused.value = true;
+		if (focusFromMouse) {
+			focusFromMouse = false;
+			props.onFocus?.(e);
+			return;
+		}
+		if (!mergedDisabled.value && activeKey.value === null) {
+			const visibleSelectedKey = selectedKeys.value.find((key) => {
+				return flattenNodes.value.some((nodeItem) => nodeItem.key === key);
+			});
+			if (visibleSelectedKey !== void 0) onActiveChange(visibleSelectedKey);
+			else onActiveChange(flattenNodes.value?.[0]?.key || null);
+		}
 		props.onFocus?.(e);
 	}
 	function onBlur(e) {
-		focused.value = false;
+		focusFromMouse = false;
 		onActiveChange(null);
 		props.onBlur?.(e);
 	}
@@ -558,6 +569,8 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 		dragNodeProps = null;
 	};
 	function onKeyDown(e) {
+		if (mergedDisabled.value) return;
+		const nodes = flattenNodes.value;
 		switch (e.which || e.keyCode) {
 			case KeyCode.UP:
 				offsetActiveKey(-1);
@@ -567,16 +580,27 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 				offsetActiveKey(1);
 				e.preventDefault();
 				break;
+			case KeyCode.HOME:
+				onActiveChange(nodes[0]?.key ?? null);
+				e.preventDefault();
+				break;
+			case KeyCode.END:
+				onActiveChange(nodes[nodes.length - 1]?.key ?? null);
+				e.preventDefault();
+				break;
 		}
 		const activeItem = getActiveItem.value;
 		if (activeItem && activeItem.data) {
 			const required = getTreeNodeRequiredProps.value;
-			const expandable = activeItem.data.isLeaf === false || !!(activeItem.data[mergedFieldNames.value.children] || []).length;
 			const eventNode = convertNodePropsToEventData({
 				...getTreeNodeProps(activeKey.value, required),
 				data: activeItem.data,
 				active: true
 			});
+			const hasChildren = !!getEntity(keyEntities.value, activeKey.value)?.children?.length;
+			const expandable = !isLeafNode(activeItem.data.isLeaf, props.loadData, hasChildren, eventNode.loaded);
+			const canCheck = mergedCheckable.value && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox;
+			const canSelect = !mergedCheckable.value && mergedSelectable.value && !eventNode.disabled && eventNode.selectable !== false;
 			switch (e.which || e.keyCode) {
 				case KeyCode.LEFT:
 					if (expandable && expandedKeys.value.includes(activeKey.value)) onNodeExpand({}, eventNode);
@@ -590,8 +614,8 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 					break;
 				case KeyCode.ENTER:
 				case KeyCode.SPACE:
-					if (mergedCheckable.value && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) onNodeCheck({}, eventNode, !mergedChecked.value.checkedKeys.includes(activeKey.value));
-					else if (!mergedCheckable.value && mergedSelectable.value && !eventNode.disabled && eventNode.selectable !== false) onNodeSelect({}, eventNode);
+					if (canCheck) onNodeCheck({}, eventNode, !mergedChecked.value.checkedKeys.includes(activeKey.value));
+					else if (canSelect) onNodeSelect({}, eventNode);
 					break;
 			}
 		}
@@ -695,11 +719,13 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 			data: true
 		});
 		return createVNode("div", {
-			"class": clsx(mergedPrefixCls.value, props.className, props.rootClassName, {
-				[`${mergedPrefixCls.value}-show-line`]: mergedShowLine.value,
-				[`${mergedPrefixCls.value}-focused`]: focused.value,
-				[`${mergedPrefixCls.value}-active-focused`]: activeKey.value !== null
-			}),
+			"onMousedown": () => {
+				focusFromMouse = true;
+			},
+			"onMouseup": () => {
+				focusFromMouse = false;
+			},
+			"class": clsx(mergedPrefixCls.value, props.className, props.rootClassName, { [`${mergedPrefixCls.value}-show-line`]: mergedShowLine.value }),
 			"style": props.rootStyle
 		}, [createVNode(NodeList_default, mergeProps({
 			"ref": listRef,

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { ExpandAction, TreeProps, TreeRef, default as Tree } from './Tree';
 import { default as TreeNode } from './TreeNode';
 export { UnstableContextKey } from './contextTypes';
 export { TreeNode };
-export { conductExpandParent } from './util.ts';
+export { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, isFirstChild, isLastChild, parseCheckedKeys, posToArr } from './util.ts';
 export { conductCheck } from './utils/conductUtil';
 export { convertDataToEntities, convertTreeToData, fillFieldNames, flattenTreeData } from './utils/treeUtil';
 export type { BasicDataNode, DataEntity, DataNode, EventDataNode, ExpandAction, FieldNames, FlattenNode, IconType, Key, KeyEntities, ScrollTo, TreeNodeProps, TreeProps, TreeRef, };

package/dist/index.js

@@ -1,10 +1,10 @@
 import { UnstableContextKey } from "./contextTypes.js";
 import { convertDataToEntities, convertTreeToData, fillFieldNames, flattenTreeData } from "./utils/treeUtil.js";
 import TreeNode_default from "./TreeNode.js";
-import { conductExpandParent } from "./util.js";
+import { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, isFirstChild, isLastChild, parseCheckedKeys, posToArr } from "./util.js";
 import { conductCheck } from "./utils/conductUtil.js";
 import Tree_default from "./Tree.js";
 var ExportTree = Tree_default;
 ExportTree.TreeNode = TreeNode_default;
 var src_default = ExportTree;
-export { TreeNode_default as TreeNode, UnstableContextKey, conductCheck, conductExpandParent, convertDataToEntities, convertTreeToData, src_default as default, fillFieldNames, flattenTreeData };
+export { TreeNode_default as TreeNode, UnstableContextKey, arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductCheck, conductExpandParent, convertDataToEntities, convertTreeToData, src_default as default, fillFieldNames, flattenTreeData, getDragChildrenKeys, isFirstChild, isLastChild, parseCheckedKeys, posToArr };

package/dist/utils/treeUtil.d.ts

@@ -32,7 +32,9 @@ export declare function convertDataToEntities(dataNodes: DataNode[], { initWrapp
     externalGetKey?: ExternalGetKey;
     childrenPropName?: string;
     fieldNames?: FieldNames;
-}): Wrapper;
+}, 
+/** @deprecated Use `config.externalGetKey` instead */
+legacyExternalGetKey?: ExternalGetKey): Wrapper;
 export interface TreeNodeRequiredProps<TreeDataType extends BasicDataNode = DataNode> {
     expandedKeys: Key[];
     selectedKeys: Key[];

package/dist/utils/treeUtil.js

@@ -136,7 +136,8 @@ function traverseDataNodes(dataNodes, callback, config) {
 	}
 	processNode(null);
 }
-function convertDataToEntities(dataNodes, { initWrapper, processEntity, onProcessFinished, externalGetKey, childrenPropName, fieldNames } = {}) {
+function convertDataToEntities(dataNodes, { initWrapper, processEntity, onProcessFinished, externalGetKey, childrenPropName, fieldNames } = {}, legacyExternalGetKey) {
+	const mergedExternalGetKey = externalGetKey || legacyExternalGetKey;
 	const posEntities = {};
 	const keyEntities = {};
 	let wrapper = {
@@ -164,7 +165,7 @@ function convertDataToEntities(dataNodes, { initWrapper, processEntity, onProces
 		}
 		processEntity?.(entity, wrapper);
 	}, {
-		externalGetKey,
+		externalGetKey: mergedExternalGetKey,
 		childrenPropName,
 		fieldNames
 	});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/tree",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -15,7 +15,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -29,7 +29,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.9",
+    "@v-c/util": "^1.0.11",
     "@v-c/virtual-list": "^1.0.5"
   },
   "scripts": {

package/dist/DropIndicator.cjs

@@ -1,54 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-let vue = require("vue");
-var DropIndicator = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	return () => {
-		const style = {
-			pointerEvents: "none",
-			position: "absolute",
-			right: 0,
-			backgroundColor: "red",
-			height: `2px`
-		};
-		switch (props.dropPosition) {
-			case -1:
-				style.top = 0;
-				style.left = `${-props.dropLevelOffset * props.indent}px`;
-				break;
-			case 1:
-				style.bottom = 0;
-				style.left = `${-props.dropLevelOffset * props.indent}px`;
-				break;
-			case 0:
-			default:
-				style.bottom = 0;
-				style.left = `${props.indent}px`;
-				break;
-		}
-		return (0, vue.createVNode)("div", { "style": style }, null);
-	};
-}, {
-	props: {
-		dropPosition: {
-			required: true,
-			default: void 0
-		},
-		dropLevelOffset: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		indent: {
-			type: Number,
-			required: true,
-			default: void 0
-		}
-	},
-	name: "DropIndicator",
-	inheritAttrs: false
-});
-var DropIndicator_default = DropIndicator;
-exports.default = DropIndicator_default;

package/dist/Indent.cjs

@@ -1,52 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-let vue = require("vue");
-let _v_c_util = require("@v-c/util");
-var Indent = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	return () => {
-		const { prefixCls, level, isStart, isEnd } = props;
-		const baseClassName = `${prefixCls}-indent-unit`;
-		const list = [];
-		for (let i = 0; i < level; i += 1) list.push((0, vue.createVNode)("span", {
-			"key": i,
-			"class": (0, _v_c_util.clsx)(baseClassName, {
-				[`${baseClassName}-start`]: isStart?.[i],
-				[`${baseClassName}-end`]: isEnd?.[i]
-			})
-		}, null));
-		return (0, vue.createVNode)("span", {
-			"aria-hidden": "true",
-			"class": `${props.prefixCls}-indent`
-		}, [list]);
-	};
-}, {
-	props: {
-		prefixCls: {
-			type: String,
-			required: true,
-			default: void 0
-		},
-		level: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		isStart: {
-			type: Array,
-			required: false,
-			default: void 0
-		},
-		isEnd: {
-			type: Array,
-			required: false,
-			default: void 0
-		}
-	},
-	name: "Indent",
-	inheritAttrs: false
-});
-var Indent_default = Indent;
-exports.default = Indent_default;

package/dist/MotionTreeNode.cjs

@@ -1,330 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-const require_contextTypes = require("./contextTypes.cjs");
-const require_treeUtil = require("./utils/treeUtil.cjs");
-const require_TreeNode = require("./TreeNode.cjs");
-let vue = require("vue");
-let _v_c_util = require("@v-c/util");
-let _v_c_util_dist_omit = require("@v-c/util/dist/omit");
-_v_c_util_dist_omit = require_rolldown_runtime.__toESM(_v_c_util_dist_omit);
-let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
-var MotionTreeNode = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	const context = (0, vue.inject)(require_contextTypes.TreeContextKey, null);
-	const prefixCls = (0, vue.computed)(() => context?.prefixCls);
-	let hideTimer = null;
-	const triggerMotionEndRef = (0, vue.ref)(false);
-	const visible = (0, vue.ref)(true);
-	const motionName = (0, vue.computed)(() => props?.motion?.name);
-	const targetVisible = (0, vue.computed)(() => !!props.motionNodes && props.motionType !== "hide");
-	const triggerMotionEnd = () => {
-		if (props.motionNodes && !triggerMotionEndRef.value) {
-			triggerMotionEndRef.value = true;
-			props.onMotionEnd?.();
-		}
-	};
-	const triggerMotionStart = () => {
-		if (props.motionNodes) props?.onMotionStart?.();
-	};
-	(0, vue.onBeforeUnmount)(() => {
-		if (hideTimer) {
-			clearTimeout(hideTimer);
-			hideTimer = null;
-		}
-		triggerMotionEnd();
-	});
-	(0, vue.watch)(() => props.motionNodes, (newMotionNodes, prevMotionNodes) => {
-		if (newMotionNodes) {
-			if (!prevMotionNodes) {
-				triggerMotionEndRef.value = false;
-				triggerMotionStart();
-			}
-			if (targetVisible.value !== visible.value) if (targetVisible.value) {
-				if (hideTimer) {
-					clearTimeout(hideTimer);
-					hideTimer = null;
-				}
-				visible.value = true;
-			} else {
-				visible.value = true;
-				if (hideTimer) clearTimeout(hideTimer);
-				hideTimer = setTimeout(() => {
-					visible.value = false;
-					hideTimer = null;
-				});
-			}
-		} else if (newMotionNodes === null) {
-			if (hideTimer) {
-				clearTimeout(hideTimer);
-				hideTimer = null;
-			}
-			visible.value = true;
-		}
-	}, {
-		immediate: true,
-		flush: "post"
-	});
-	const onVisibleChanged = (newVisible) => {
-		if (targetVisible.value === newVisible) triggerMotionEnd();
-	};
-	return () => {
-		const { motionNodes, treeNodeRequiredProps, active, motion, motionType, treeId } = props;
-		if (motionNodes) {
-			const _motionNodes = motionNodes ?? [];
-			const requiredProps = treeNodeRequiredProps;
-			return (0, vue.createVNode)(vue.Transition, (0, vue.mergeProps)((0, _v_c_util_dist_utils_transition.getTransitionProps)(motionName.value, {
-				...motion,
-				appear: motionType === "show"
-			}), {
-				"onAfterEnter": () => {
-					onVisibleChanged(true);
-				},
-				"onAfterLeave": () => {
-					onVisibleChanged(false);
-				}
-			}), { default: () => [visible.value && (0, vue.createVNode)("div", { "class": (0, _v_c_util.clsx)(`${prefixCls.value}-treenode-motion`) }, [_motionNodes.map((treeNode) => {
-				const { data: nodeData, title, key, isStart, isEnd } = treeNode;
-				const restProps = { ...nodeData || {} };
-				delete restProps.children;
-				delete restProps.key;
-				return (0, vue.createVNode)(require_TreeNode.default, (0, vue.mergeProps)(restProps, require_treeUtil.getTreeNodeProps(key, requiredProps), {
-					"title": title,
-					"active": active,
-					"data": nodeData,
-					"key": key,
-					"isStart": isStart,
-					"isEnd": isEnd,
-					"treeId": treeId
-				}), null);
-			})])] });
-		}
-		return (0, vue.createVNode)(require_TreeNode.default, (0, vue.mergeProps)((0, _v_c_util_dist_omit.default)(props, [
-			"motion",
-			"motionNodes",
-			"motionType",
-			"onMotionStart",
-			"onMotionEnd",
-			"treeNodeRequiredProps"
-		]), { "active": active }), null);
-	};
-}, {
-	props: {
-		active: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		motion: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		motionNodes: {
-			type: [Array, null],
-			required: false,
-			default: void 0
-		},
-		motionType: {
-			type: [String, null],
-			required: false,
-			default: void 0
-		},
-		onMotionStart: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		onMotionEnd: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		treeNodeRequiredProps: {
-			type: Object,
-			required: true,
-			default: void 0
-		},
-		treeId: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		eventKey: {
-			type: [String, Number],
-			required: false,
-			default: void 0
-		},
-		prefixCls: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		className: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		style: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		id: {
-			type: [String, Number],
-			required: false,
-			default: void 0
-		},
-		expanded: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		selected: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		checked: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		loaded: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		loading: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		halfChecked: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		title: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
-			required: false,
-			default: void 0
-		},
-		dragOver: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		dragOverGapTop: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		dragOverGapBottom: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		pos: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		data: {
-			required: false,
-			default: void 0
-		},
-		isStart: {
-			type: Array,
-			required: false,
-			default: void 0
-		},
-		isEnd: {
-			type: Array,
-			required: false,
-			default: void 0
-		},
-		onMouseMove: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		isLeaf: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		checkable: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		selectable: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		disableCheckbox: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		icon: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
-			required: false,
-			default: void 0
-		},
-		switcherIcon: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
-			required: false,
-			default: void 0
-		},
-		children: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
-			required: false,
-			default: void 0
-		}
-	},
-	name: "MotionTreeNode",
-	inheritAttrs: false
-});
-var MotionTreeNode_default = MotionTreeNode;
-exports.default = MotionTreeNode_default;