@v-c/tree 1.0.3 → 1.0.5

package/dist/NodeList.d.ts

@@ -34,6 +34,8 @@ export interface NodeListProps {
     onKeyDown?: (e: KeyboardEvent) => void;
     onFocus?: (e: FocusEvent) => void;
     onBlur?: (e: FocusEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
+    onMouseUp?: (e: MouseEvent) => void;
     onActiveChange?: (key: Key | null) => void;
     onListChangeStart?: () => void;
     onListChangeEnd?: () => void;

package/dist/NodeList.js

@@ -1,8 +1,8 @@
-import { getKey, getTreeNodeId, getTreeNodeProps } from "./utils/treeUtil.js";
+import { getKey, getTreeNodeProps } from "./utils/treeUtil.js";
 import MotionTreeNode_default from "./MotionTreeNode.js";
 import { findExpandedKeys, getExpandRange } from "./utils/diffUtil.js";
 import { Fragment, computed, createVNode, defineComponent, mergeProps, ref, shallowRef, watch } from "vue";
-import useId from "@v-c/util/dist/hooks/useId";
+import useId, { getId } from "@v-c/util/dist/hooks/useId";
 import { toPropsRefs } from "@v-c/util/dist/props-util";
 import VirtualList from "@v-c/virtual-list";
 function itemKey(item) {
@@ -106,7 +106,7 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
 	});
 	const mergedData = computed(() => props.motion ? transitionData.value : props.data || []);
 	return () => {
-		const { motion, activeItem, focusable, disabled, tabIndex, prefixCls, virtual, itemHeight, height, scrollWidth, onScroll, onContextmenu, onKeyDown, onFocus, onBlur, onListChangeStart, onActiveChange } = props;
+		const { motion, activeItem, focusable, disabled, tabIndex, prefixCls, virtual, itemHeight, height, scrollWidth, onScroll, onContextmenu, onKeyDown, onFocus, onBlur, onMouseDown, onMouseUp, onListChangeStart, onActiveChange } = props;
 		return createVNode(Fragment, null, [createVNode("div", {
 			"class": `${prefixCls}-treenode`,
 			"aria-hidden": true,
@@ -134,13 +134,15 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
 			"ref": listRef,
 			"role": "tree",
 			"tabindex": focusable !== false && !disabled ? tabIndex : void 0,
-			"aria-activedescendant": activeItem ? getTreeNodeId(treeId, activeItem.key) : void 0,
+			"aria-activedescendant": activeItem ? getId(treeId, activeItem.key) : void 0,
 			"style": props.style,
 			"onContextmenu": onContextmenu,
 			"onScroll": onScroll,
 			"onKeydown": onKeyDown,
 			"onFocus": onFocus,
 			"onBlur": onBlur,
+			"onMousedown": onMouseDown,
+			"onMouseup": onMouseUp,
 			"onVisibleChange": (originList) => {
 				if (motionType.value && originList.every((item) => itemKey(item) !== MOTION_KEY)) onMotionEnd();
 			}
@@ -310,6 +312,16 @@ var NodeList_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }
 			required: false,
 			default: void 0
 		},
+		onMouseDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onMouseUp: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		onActiveChange: {
 			type: Function,
 			required: false,

package/dist/Tree.d.ts

@@ -1,7 +1,7 @@
 import { VueNode } from '@v-c/util/dist/type';
 import { CSSMotionProps } from '@v-c/util/dist/utils/transition';
 import { CSSProperties } from 'vue';
-import { DraggableConfig, NodeDragEventParams, NodeMouseEventHandler, NodeMouseEventParams } from './contextTypes';
+import { DraggableConfig, NodeDragEventParams, NodeMouseEventHandler, NodeMouseEventParams, SemanticName } from './contextTypes';
 import { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, IconType, Key, ScrollTo } from './interface';
 import { AllowDrop } from './util';
 export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
@@ -19,12 +19,13 @@ export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
 export type DraggableFn = (node: DataNode) => boolean;
 export type DraggableUnion = DraggableFn | boolean | DraggableConfig;
 export type ExpandAction = false | 'click' | 'doubleClick';
+export type { SemanticName } from './contextTypes';
 export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
     prefixCls?: string;
     className?: string;
     style?: CSSProperties;
-    styles?: Partial<Record<'itemIcon' | 'item' | 'itemTitle', CSSProperties>>;
-    classNames?: Partial<Record<'itemIcon' | 'item' | 'itemTitle', string>>;
+    styles?: Partial<Record<SemanticName, CSSProperties>>;
+    classNames?: Partial<Record<SemanticName, string>>;
     focusable?: boolean;
     activeKey?: Key | null;
     tabIndex?: number;
@@ -61,6 +62,8 @@ export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
         prefixCls: string;
         direction: Direction;
     }) => any;
+    onMouseDown?: (e: MouseEvent) => void;
+    onMouseUp?: (e: MouseEvent) => void;
     onFocus?: (e: FocusEvent) => void;
     onBlur?: (e: FocusEvent) => void;
     onKeyDown?: (e: KeyboardEvent) => void;

package/dist/Tree.js

@@ -177,7 +177,7 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 	const delayedDragEnterLogic = {};
 	const loadingRetryTimes = {};
 	const listRef = ref();
-	let focusFromMouse = false;
+	let focusedByMouse = false;
 	const getTreeNodeRequiredProps = computed(() => ({
 		expandedKeys: expandedKeys.value || [],
 		selectedKeys: selectedKeys.value || [],
@@ -219,12 +219,7 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 		onActiveChange(item ? item.key : null);
 	}
 	function onFocus(e) {
-		if (focusFromMouse) {
-			focusFromMouse = false;
-			props.onFocus?.(e);
-			return;
-		}
-		if (!mergedDisabled.value && activeKey.value === null) {
+		if (!focusedByMouse && !mergedDisabled.value && activeKey.value === null) {
 			const visibleSelectedKey = selectedKeys.value.find((key) => {
 				return flattenNodes.value.some((nodeItem) => nodeItem.key === key);
 			});
@@ -234,10 +229,18 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 		props.onFocus?.(e);
 	}
 	function onBlur(e) {
-		focusFromMouse = false;
+		focusedByMouse = false;
 		onActiveChange(null);
 		props.onBlur?.(e);
 	}
+	function onMouseDown(e) {
+		focusedByMouse = true;
+		props.onMouseDown?.(e);
+	}
+	function onMouseUp(e) {
+		focusedByMouse = false;
+		props.onMouseUp?.(e);
+	}
 	function onNodeLoad(treeNode) {
 		const key = treeNode.key;
 		if (getEntity(keyEntities.value, key)?.children?.length) return;
@@ -719,12 +722,6 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 			data: true
 		});
 		return createVNode("div", {
-			"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({
@@ -744,6 +741,8 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 			"tabIndex": mergedTabIndex.value,
 			"activeItem": getActiveItem.value,
 			"onFocus": onFocus,
+			"onMouseDown": onMouseDown,
+			"onMouseUp": onMouseUp,
 			"onBlur": onBlur,
 			"onKeyDown": onKeyDown,
 			"onActiveChange": onActiveChange,
@@ -940,6 +939,16 @@ var Tree_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expos
 			required: false,
 			default: void 0
 		},
+		onMouseDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onMouseUp: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		onFocus: {
 			type: Function,
 			required: false,

package/dist/TreeNode.js

@@ -118,12 +118,16 @@ var TreeNode = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	const renderSwitcher = () => {
 		if (memoizedIsLeaf.value) {
 			const switcherIconDom$1 = renderSwitcherIconDom(true);
-			return switcherIconDom$1 !== false ? createVNode("span", { "class": clsx(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher-noop`) }, [switcherIconDom$1]) : null;
+			return switcherIconDom$1 !== false ? createVNode("span", {
+				"class": clsx(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher-noop`, context.classNames?.itemSwitcher),
+				"style": context.styles?.itemSwitcher
+			}, [switcherIconDom$1]) : null;
 		}
 		const switcherIconDom = renderSwitcherIconDom(false);
 		return switcherIconDom !== false ? createVNode("span", {
 			"onClick": onExpand,
-			"class": clsx(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher_${props.expanded ? ICON_OPEN : ICON_CLOSE}`)
+			"class": clsx(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher_${props.expanded ? ICON_OPEN : ICON_CLOSE}`, context.classNames?.itemSwitcher),
+			"style": context.styles?.itemSwitcher
 		}, [switcherIconDom]) : null;
 	};
 	const iconNode = computed(() => {

package/dist/contextTypes.d.ts

@@ -23,7 +23,7 @@ export interface DropIndicatorRenderProps {
     prefixCls: string;
     direction: Direction;
 }
-export type SemanticName = 'itemIcon' | 'item' | 'itemTitle';
+export type SemanticName = 'itemIcon' | 'item' | 'itemTitle' | 'itemSwitcher';
 export interface TreeContextProps<TreeDataType extends BasicDataNode = DataNode> {
     styles?: Partial<Record<SemanticName, CSSProperties>>;
     classNames?: Partial<Record<SemanticName, string>>;

package/dist/utils/treeUtil.d.ts

@@ -61,5 +61,4 @@ export declare function getTreeNodeProps<TreeDataType extends BasicDataNode = Da
 };
 export declare function convertNodePropsToEventData<TreeDataType extends BasicDataNode = DataNode>(props: TreeNodeProps<TreeDataType>): EventDataNode<TreeDataType>;
 export declare function isLeafNode<TreeDataType extends BasicDataNode = DataNode>(isLeaf: boolean | undefined, loadData: ((node: EventDataNode<TreeDataType>) => Promise<any>) | undefined, hasChildren: boolean, loaded: boolean | undefined): boolean;
-export declare function getTreeNodeId(treeId: string, key: Key): string;
 export {};

package/dist/utils/treeUtil.js

@@ -215,7 +215,4 @@ function isLeafNode(isLeaf, loadData, hasChildren, loaded) {
 	if (isLeaf === false) return false;
 	return !!isLeaf || !loadData && !hasChildren || !!(loadData && loaded && !hasChildren);
 }
-function getTreeNodeId(treeId, key) {
-	return `${treeId}-${key}`;
-}
-export { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getKey, getPosition, getTreeNodeId, getTreeNodeProps, isLeafNode, isTreeNode, traverseDataNodes, warningWithoutKey };
+export { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getKey, getPosition, getTreeNodeProps, isLeafNode, isTreeNode, traverseDataNodes, warningWithoutKey };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/tree",
   "type": "module",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -29,8 +29,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.14",
-    "@v-c/virtual-list": "^1.0.5"
+    "@v-c/util": "^1.0.18",
+    "@v-c/virtual-list": "^1.0.6"
   },
   "scripts": {
     "build": "vite build",