@v-c/tree 1.2.1 → 1.2.2

package/dist/Tree.js

@@ -85,20 +85,22 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 	const setExpandedKeys = (keys) => {
 		expandedKeys.value = keys;
 	};
-	watch(() => props.expandedKeys, () => {
-		if (props.expandedKeys === void 0) return;
-		const keys = props.expandedKeys || [];
+	watch(() => [props.expandedKeys, props.autoExpandParent], ([keys], [prevKeys]) => {
+		if (keys === void 0) {
+			if (prevKeys !== void 0) expandedKeys.value = [];
+			return;
+		}
+		const nextKeys = keys ?? [];
 		if (props.autoExpandParent) {
-			expandedKeys.value = conductExpandParent(keys, keyEntities.value);
+			expandedKeys.value = conductExpandParent(nextKeys, keyEntities.value);
 			return;
 		}
-		expandedKeys.value = keys;
+		expandedKeys.value = nextKeys;
 	});
 	const flattenNodes = computed(() => flattenTreeData(mergedTreeData.value, expandedKeys.value, mergedFieldNames.value));
 	const selectedKeys = shallowRef(calcSelectedKeys(props?.selectedKeys || props.defaultSelectedKeys || [], { multiple: mergedMultiple.value }) || []);
 	watch(() => props.selectedKeys, () => {
-		if (props.selectedKeys === void 0) return;
-		selectedKeys.value = calcSelectedKeys(props.selectedKeys, { multiple: mergedMultiple.value }) || [];
+		selectedKeys.value = calcSelectedKeys(props.selectedKeys ?? [], { multiple: mergedMultiple.value }) || [];
 	});
 	const setSelectedKeys = (keys) => {
 		selectedKeys.value = keys;
@@ -120,8 +122,7 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 		rawCheckedKeys.value = keys;
 	};
 	watch(() => props.checkedKeys, () => {
-		if (props.checkedKeys === void 0) return;
-		const parsed = parseCheckedKeys(props.checkedKeys);
+		const parsed = props.checkedKeys === void 0 ? null : parseCheckedKeys(props.checkedKeys);
 		rawCheckedKeys.value = parsed?.checkedKeys || [];
 	});
 	const rawHalfCheckedKeys = shallowRef(defaultCheckedKeyEntity.halfCheckedKeys);
@@ -129,8 +130,7 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 		rawHalfCheckedKeys.value = keys;
 	};
 	watch(() => props.checkedKeys, () => {
-		if (props.checkedKeys === void 0) return;
-		const parsed = parseCheckedKeys(props.checkedKeys);
+		const parsed = props.checkedKeys === void 0 ? null : parseCheckedKeys(props.checkedKeys);
 		rawHalfCheckedKeys.value = parsed?.halfCheckedKeys || [];
 	});
 	const mergedChecked = computed(() => {
@@ -152,10 +152,16 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 			halfCheckedKeys: halfCheckedKeysValue
 		};
 	});
-	const [loadedKeys, setLoadedKeys] = useMergedState(() => [], { value: computed(() => props.loadedKeys === void 0 ? void 0 : props.loadedKeys) });
+	const [loadedKeys, setLoadedKeys] = useMergedState(() => [], {
+		value: computed(() => props.loadedKeys === void 0 ? void 0 : props.loadedKeys),
+		postState: (keys) => keys ?? []
+	});
 	const loadingKeys = ref([]);
 	const listChanging = ref(false);
-	const [activeKey, setActiveKey] = useMergedState(null, { value: computed(() => props.activeKey === void 0 ? void 0 : props.activeKey) });
+	const [activeKey, setActiveKey] = useMergedState(null, {
+		value: computed(() => props.activeKey === void 0 ? void 0 : props.activeKey),
+		postState: (key) => key ?? null
+	});
 	function onListChangeStart() {
 		listChanging.value = true;
 	}
@@ -177,8 +183,14 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 	let dragNodeProps = null;
 	let dragStartMousePosition = null;
 	let currentMouseOverDroppableNodeKey = null;
-	const delayedDragEnterLogic = {};
+	let delayedDragEnterLogic = {};
 	const loadingRetryTimes = {};
+	const clearDelayedDragEnterLogic = () => {
+		Object.values(delayedDragEnterLogic).forEach((timeoutId) => {
+			clearTimeout(timeoutId);
+		});
+		delayedDragEnterLogic = {};
+	};
 	const listRef = ref();
 	let focusedByMouse = false;
 	const getTreeNodeRequiredProps = computed(() => ({
@@ -223,7 +235,7 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 		onActiveChange(item ? item.key : null);
 	}
 	function onFocus(e) {
-		if (!focusedByMouse && !mergedDisabled.value && activeKey.value === null) {
+		if (e.target === e.currentTarget && !focusedByMouse && !mergedDisabled.value && activeKey.value === null) {
 			const visibleSelectedKey = selectedKeys.value.find((key) => {
 				return flattenNodes.value.some((nodeItem) => nodeItem.key === key);
 			});
@@ -433,11 +445,9 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 		window.addEventListener("mouseup", onGlobalMouseUp);
 	});
 	onBeforeUnmount(() => {
+		clearDelayedDragEnterLogic();
 		window.removeEventListener("dragend", onWindowDragEnd);
 		window.removeEventListener("mouseup", onGlobalMouseUp);
-		Object.keys(delayedDragEnterLogic).forEach((key) => {
-			clearTimeout(delayedDragEnterLogic[key]);
-		});
 	});
 	const onNodeDragStart = (event, nodeProps) => {
 		dragNodeProps = nodeProps;
@@ -468,9 +478,7 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 			resetDragState();
 			return;
 		}
-		Object.keys(delayedDragEnterLogic).forEach((key) => {
-			clearTimeout(delayedDragEnterLogic[key]);
-		});
+		clearDelayedDragEnterLogic();
 		if (dragNodeProps.eventKey !== nodeProps.eventKey) delayedDragEnterLogic[pos] = window.setTimeout(() => {
 			if (draggingNodeKey.value === null) return;
 			let newExpandedKeys = [...expandedKeys.value];

package/dist/TreeNode.js

@@ -3,7 +3,7 @@ import { TreeContextKey, UnstableContextKey } from "./contextTypes.js";
 import getEntity from "./utils/keyUtil.js";
 import { convertNodePropsToEventData, isLeafNode } from "./utils/treeUtil.js";
 import { computed, createVNode, defineComponent, inject, mergeProps, ref, watchEffect } from "vue";
-import { clsx } from "@v-c/util";
+import { clsx, isVueRenderable } from "@v-c/util";
 import { getId } from "@v-c/util/dist/hooks/useId";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
 import { filterEmpty } from "@v-c/util/dist/props-util";
@@ -173,8 +173,8 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		const wrapClass = `${context.prefixCls}-node-content-wrapper`;
 		let icon;
 		if (context.showIcon) {
-			const currentIcon = props.icon || context.icon;
-			icon = currentIcon ? createVNode("span", {
+			const currentIcon = isVueRenderable(props.icon) ? props.icon : context.icon;
+			icon = isVueRenderable(currentIcon) ? createVNode("span", {
 				"class": clsx(context.classNames?.itemIcon, `${context.prefixCls}-iconEle`, `${context.prefixCls}-icon__customize`),
 				"style": context.styles?.itemIcon
 			}, [typeof currentIcon === "function" ? currentIcon(props) : currentIcon]) : iconNode.value;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/tree",
   "type": "module",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -34,7 +34,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.1.0",
+    "@v-c/util": "^1.2.0",
     "@v-c/virtual-list": "^1.1.1"
   },
   "scripts": {