@v-c/tree 1.2.0 → 1.2.2

package/dist/MotionTreeNode.js

@@ -112,6 +112,7 @@ var MotionTreeNode = /* @__PURE__ */ defineComponent((props) => {
 			default: void 0
 		},
 		motion: {
+			type: Object,
 			required: false,
 			default: void 0
 		},
@@ -145,6 +146,7 @@ var MotionTreeNode = /* @__PURE__ */ defineComponent((props) => {
 			default: void 0
 		},
 		eventKey: {
+			type: [String, Number],
 			required: false,
 			default: void 0
 		},
@@ -164,6 +166,7 @@ var MotionTreeNode = /* @__PURE__ */ defineComponent((props) => {
 			default: void 0
 		},
 		id: {
+			type: [String, Number],
 			required: false,
 			default: void 0
 		},
@@ -198,9 +201,16 @@ var MotionTreeNode = /* @__PURE__ */ defineComponent((props) => {
 			default: void 0
 		},
 		title: {
-			type: Function,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		dragOver: {
@@ -238,6 +248,7 @@ var MotionTreeNode = /* @__PURE__ */ defineComponent((props) => {
 			default: void 0
 		},
 		onMouseMove: {
+			type: Function,
 			required: false,
 			default: void 0
 		},
@@ -267,18 +278,41 @@ var MotionTreeNode = /* @__PURE__ */ defineComponent((props) => {
 			default: void 0
 		},
 		icon: {
-			type: Function,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		switcherIcon: {
-			type: Function,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		children: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
 			default: void 0
 		}

package/dist/NodeList.js

@@ -245,12 +245,20 @@ var NodeList = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
 			required: false,
 			default: void 0
 		},
-		dragOverNodeKey: { required: true },
+		dragOverNodeKey: {
+			type: [
+				String,
+				Number,
+				null
+			],
+			required: true
+		},
 		dropPosition: {
 			type: [Number, null],
 			required: true
 		},
 		motion: {
+			type: Object,
 			required: false,
 			default: void 0
 		},

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];
@@ -788,6 +796,11 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 			default: void 0
 		},
 		activeKey: {
+			type: [
+				String,
+				Number,
+				null
+			],
 			required: false,
 			default: void 0
 		},
@@ -817,9 +830,16 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 			default: void 0
 		},
 		icon: {
-			type: Function,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		selectable: {
@@ -843,9 +863,16 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 			default: void 0
 		},
 		checkable: {
-			type: Boolean,
+			type: [
+				Boolean,
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Array
+			],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		checkStrictly: {
@@ -1048,13 +1075,21 @@ var Tree = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 			default: void 0
 		},
 		motion: {
+			type: Object,
 			required: false,
 			default: void 0
 		},
 		switcherIcon: {
-			type: Function,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		height: {

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";
@@ -75,10 +75,10 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	const onDragStart = (e) => {
 		e.stopPropagation();
 		dragNodeHighlight.value = true;
-		context.onNodeDragStart(e, props);
 		try {
 			e.dataTransfer?.setData("text/plain", "");
 		} catch {}
+		context.onNodeDragStart(e, props);
 	};
 	const onDragEnter = (e) => {
 		e.preventDefault();
@@ -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;
@@ -272,6 +272,7 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 }, {
 	props: {
 		eventKey: {
+			type: [String, Number],
 			required: false,
 			default: void 0
 		},
@@ -291,6 +292,7 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			default: void 0
 		},
 		id: {
+			type: [String, Number],
 			required: false,
 			default: void 0
 		},
@@ -330,9 +332,16 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			default: void 0
 		},
 		title: {
-			type: Function,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		dragOver: {
@@ -379,6 +388,7 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			default: void 0
 		},
 		onMouseMove: {
+			type: Function,
 			required: false,
 			default: void 0
 		},
@@ -408,18 +418,41 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			default: void 0
 		},
 		icon: {
-			type: Function,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		switcherIcon: {
-			type: Function,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		children: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
 			required: false,
 			default: void 0
 		}

package/dist/util.d.ts

@@ -5,8 +5,8 @@ export interface AllowDropOptions<TreeDataType extends BasicDataNode = DataNode>
     dropPosition: -1 | 0 | 1;
 }
 export type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (options: AllowDropOptions<TreeDataType>) => boolean;
-export declare function arrDel(list: Key[], value: Key): VCKey[];
-export declare function arrAdd(list: Key[], value: Key): VCKey[];
+export declare function arrDel(list: Key[], value: Key): import('packages/util/dist/type').Key[];
+export declare function arrAdd(list: Key[], value: Key): import('packages/util/dist/type').Key[];
 export declare function posToArr(pos: string): string[];
 export declare function getDragChildrenKeys<TreeDataType extends BasicDataNode = DataNode>(dragNodeKey: Key, keyEntities: KeyEntities<TreeDataType>): Key[];
 export declare function isLastChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: DataEntity<TreeDataType>): boolean;
@@ -25,7 +25,7 @@ export declare function calcDropPosition<TreeDataType extends BasicDataNode = Da
 };
 export declare function calcSelectedKeys(selectedKeys: Key[], { multiple }: {
     multiple?: boolean;
-}): VCKey[] | undefined;
+}): import('packages/util/dist/type').Key[] | undefined;
 export declare function parseCheckedKeys(keys: Key[] | {
     checked: Key[];
     halfChecked: Key[];

package/dist/util.js

@@ -45,7 +45,8 @@ function calcDropPosition(event, dragNodeProps, targetNodeProps, indent, startMo
 	const rawDropLevelOffset = ((direction === "rtl" ? -1 : 1) * ((startMousePosition?.x || 0) - clientX) - 12) / indent;
 	const filteredExpandKeys = expandKeys.filter((key) => (getEntity(keyEntities, key)?.children || []).length);
 	let abstractDropNodeEntity = getEntity(keyEntities, targetNodeProps.eventKey);
-	if (clientY < top + height / 2) {
+	const dropBeforeTarget = clientY < top + height / 2 && isFirstChild(abstractDropNodeEntity);
+	if (clientY < top + height / 2 && !dropBeforeTarget) {
 		const nodeIndex = flattenedNodes.findIndex(({ key }) => key === abstractDropNodeEntity.key);
 		const prevNodeKey = flattenedNodes[nodeIndex <= 0 ? 0 : nodeIndex - 1].key;
 		abstractDropNodeEntity = getEntity(keyEntities, prevNodeKey);
@@ -62,7 +63,7 @@ function calcDropPosition(event, dragNodeProps, targetNodeProps, indent, startMo
 	const abstractDragDataNode = dragNodeProps.data;
 	const abstractDropDataNode = abstractDropNodeEntity.node;
 	let dropAllowed = true;
-	if (isFirstChild(abstractDropNodeEntity) && abstractDropNodeEntity.level === 0 && clientY < top + height / 2 && allowDrop({
+	if (dropBeforeTarget && allowDrop({
 		dragNode: abstractDragDataNode,
 		dropNode: abstractDropDataNode,
 		dropPosition: -1

package/dist/utils/treeUtil.d.ts

@@ -1,7 +1,7 @@
 import { BasicDataNode, DataEntity, DataNode, EventDataNode, FieldNames, FlattenNode, GetKey, Key, KeyEntities, NodeElement, TreeNodeProps } from '../interface';
 export declare function getPosition(level: string | number, index: number): string;
 export declare function isTreeNode(node: NodeElement): boolean;
-export declare function getKey(key: Key, pos: string): any;
+export declare function getKey(key: Key, pos: string): import('packages/util/dist/type').Key;
 export declare function fillFieldNames(fieldNames?: FieldNames): Required<FieldNames>;
 export declare function warningWithoutKey(treeData: DataNode[], fieldNames: FieldNames): void;
 export declare function convertTreeToData(rootNodes: any): DataNode[];
@@ -47,7 +47,7 @@ export interface TreeNodeRequiredProps<TreeDataType extends BasicDataNode = Data
     keyEntities: KeyEntities<TreeDataType>;
 }
 export declare function getTreeNodeProps<TreeDataType extends BasicDataNode = DataNode>(key: Key, { expandedKeys, selectedKeys, loadedKeys, loadingKeys, checkedKeys, halfCheckedKeys, dragOverNodeKey, dropPosition, keyEntities, }: TreeNodeRequiredProps<TreeDataType>): {
-    eventKey: VCKey;
+    eventKey: import('packages/util/dist/type').Key;
     expanded: boolean;
     selected: boolean;
     loaded: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/tree",
   "type": "module",
-  "version": "1.2.0",
+  "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": {