@sdata/web-vue 3.0.2 → 3.2.0

package/es/tree/base-node.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,16 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction } from "../_utils/is.js";
+import Ellipsis, { PerformantEllipsis } from "../ellipsis/index.js";
 import Checkbox from "../checkbox/index.js";
 import { toArray } from "../_utils/to-array.js";
 import IconDragDotVertical from "../icon/icon-drag-dot-vertical/index.js";
 import useTreeContext from "./hooks/use-tree-context.js";
-import useDraggable from "./hooks/use-draggable.js";
+import useDraggable$1 from "./hooks/use-draggable.js";
 import useNodeKey from "./hooks/use-node-key.js";
 import node_switcher_default from "./node-switcher.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, unref, withCtx } from "vue";
+import { onLongPress, useSwipe } from "@vueuse/core";
 //#region components/tree/base-node.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-level", "data-key"];
 var _hoisted_2 = ["draggable"];
@@ -74,7 +76,25 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}];
 		});
 		const refTitle = ref();
-		const { isDragOver, isDragging, isAllowDrop, dropPosition, setDragStatus } = useDraggable(reactive({
+		const swipeState = useSwipe(refTitle, {
+			onSwipeStart(event) {
+				var _treeContext$onNodeSw;
+				(_treeContext$onNodeSw = treeContext.onNodeSwipe) === null || _treeContext$onNodeSw === void 0 || _treeContext$onNodeSw.call(treeContext, "swipeStart", key.value, event, { direction: "none" });
+			},
+			onSwipe(event) {
+				var _treeContext$onNodeSw2;
+				(_treeContext$onNodeSw2 = treeContext.onNodeSwipe) === null || _treeContext$onNodeSw2 === void 0 || _treeContext$onNodeSw2.call(treeContext, "swipe", key.value, event, { direction: swipeState.direction.value });
+			},
+			onSwipeEnd(event, direction) {
+				var _treeContext$onNodeSw3;
+				(_treeContext$onNodeSw3 = treeContext.onNodeSwipe) === null || _treeContext$onNodeSw3 === void 0 || _treeContext$onNodeSw3.call(treeContext, "swipeEnd", key.value, event, { direction });
+			}
+		});
+		onLongPress(refTitle, (event) => {
+			var _treeContext$onNodeLo;
+			(_treeContext$onNodeLo = treeContext.onNodeLongPress) === null || _treeContext$onNodeLo === void 0 || _treeContext$onNodeLo.call(treeContext, key.value, event);
+		});
+		const { isDragOver, isDragging, isAllowDrop, dropPosition, setDragStatus } = useDraggable$1(reactive({
 			key,
 			refTitle
 		}));
@@ -84,7 +104,8 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			[`${prefixCls}-title-gap-bottom`]: isDragOver.value && isAllowDrop.value && dropPosition.value > 0,
 			[`${prefixCls}-title-highlight`]: !isDragging.value && isDragOver.value && isAllowDrop.value && dropPosition.value === 0,
 			[`${prefixCls}-title-dragging`]: isDragging.value,
-			[`${prefixCls}-title-block`]: node.value.blockNode
+			[`${prefixCls}-title-block`]: node.value.blockNode,
+			[`${prefixCls}-title-with-ellipsis`]: shouldRenderEllipsis.value
 		}]);
 		const checked = computed(() => {
 			var _treeContext$checkedK, _treeContext$checkedK2;
@@ -108,6 +129,15 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		});
 		const treeDragIcon = computed(() => treeContext.dragIcon);
 		const treeNodeIcon = computed(() => treeContext.nodeIcon);
+		const shouldRenderEllipsis = computed(() => {
+			var _treeContext$treeProp3, _treeContext$treeProp4;
+			return ((_treeContext$treeProp3 = treeContext.treeProps) === null || _treeContext$treeProp3 === void 0 ? void 0 : _treeContext$treeProp3.ellipsis) === true || ((_treeContext$treeProp4 = treeContext.treeProps) === null || _treeContext$treeProp4 === void 0 ? void 0 : _treeContext$treeProp4.ellipsis) === "performant-ellipsis";
+		});
+		const ellipsisComponent = computed(() => {
+			var _treeContext$treeProp5;
+			return ((_treeContext$treeProp5 = treeContext.treeProps) === null || _treeContext$treeProp5 === void 0 ? void 0 : _treeContext$treeProp5.ellipsis) === "performant-ellipsis" ? PerformantEllipsis : Ellipsis;
+		});
+		const titleTextClassNames = computed(() => [`${prefixCls}-title-text`, { [`${prefixCls}-title-text-ellipsis`]: shouldRenderEllipsis.value }]);
 		function onSwitcherClick(e) {
 			var _children$value;
 			if (isLeaf.value) return;
@@ -148,10 +178,15 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		}
 		function onTitleClick(e) {
 			var _treeContext$onSelect;
+			onNodeDomEvent("click", e);
 			if (actionOnNodeClick.value.includes("expand")) onSwitcherClick(e);
 			if (!selectable.value || disabled.value) return;
 			(_treeContext$onSelect = treeContext.onSelect) === null || _treeContext$onSelect === void 0 || _treeContext$onSelect.call(treeContext, key.value, e);
 		}
+		function onNodeDomEvent(eventName, e) {
+			var _treeContext$onNodeEv;
+			(_treeContext$onNodeEv = treeContext.onNodeEvent) === null || _treeContext$onNodeEv === void 0 || _treeContext$onNodeEv.call(treeContext, eventName, key.value, e);
+		}
 		function onDragStart(e) {
 			if (!draggable.value) return;
 			e.stopPropagation();
@@ -246,17 +281,50 @@ var base_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					onDragover: onDragOver,
 					onDragleave: onDragLeave,
 					onDrop,
-					onClick: onTitleClick
+					onClick: onTitleClick,
+					onDblclick: _cache[0] || (_cache[0] = ($event) => onNodeDomEvent("dblclick", $event)),
+					onContextmenu: _cache[1] || (_cache[1] = ($event) => onNodeDomEvent("contextmenu", $event)),
+					onMouseover: _cache[2] || (_cache[2] = ($event) => onNodeDomEvent("mouseover", $event)),
+					onMouseenter: _cache[3] || (_cache[3] = ($event) => onNodeDomEvent("mouseenter", $event)),
+					onMouseleave: _cache[4] || (_cache[4] = ($event) => onNodeDomEvent("mouseleave", $event)),
+					onMousemove: _cache[5] || (_cache[5] = ($event) => onNodeDomEvent("mousemove", $event)),
+					onMouseout: _cache[6] || (_cache[6] = ($event) => onNodeDomEvent("mouseout", $event)),
+					onMousedown: _cache[7] || (_cache[7] = ($event) => onNodeDomEvent("mousedown", $event)),
+					onMouseup: _cache[8] || (_cache[8] = ($event) => onNodeDomEvent("mouseup", $event)),
+					onPointerdown: _cache[9] || (_cache[9] = ($event) => onNodeDomEvent("pointerdown", $event)),
+					onPointermove: _cache[10] || (_cache[10] = ($event) => onNodeDomEvent("pointermove", $event)),
+					onPointerup: _cache[11] || (_cache[11] = ($event) => onNodeDomEvent("pointerup", $event)),
+					onPointerenter: _cache[12] || (_cache[12] = ($event) => onNodeDomEvent("pointerenter", $event)),
+					onPointerleave: _cache[13] || (_cache[13] = ($event) => onNodeDomEvent("pointerleave", $event)),
+					onPointerover: _cache[14] || (_cache[14] = ($event) => onNodeDomEvent("pointerover", $event)),
+					onPointerout: _cache[15] || (_cache[15] = ($event) => onNodeDomEvent("pointerout", $event)),
+					onPointercancel: _cache[16] || (_cache[16] = ($event) => onNodeDomEvent("pointercancel", $event)),
+					onTouchstart: _cache[17] || (_cache[17] = ($event) => onNodeDomEvent("touchstart", $event)),
+					onTouchmove: _cache[18] || (_cache[18] = ($event) => onNodeDomEvent("touchmove", $event)),
+					onTouchend: _cache[19] || (_cache[19] = ($event) => onNodeDomEvent("touchend", $event)),
+					onTouchcancel: _cache[20] || (_cache[20] = ($event) => onNodeDomEvent("touchcancel", $event)),
+					onKeydown: _cache[21] || (_cache[21] = ($event) => onNodeDomEvent("keydown", $event)),
+					onKeyup: _cache[22] || (_cache[22] = ($event) => onNodeDomEvent("keyup", $event)),
+					onKeypress: _cache[23] || (_cache[23] = ($event) => onNodeDomEvent("keypress", $event))
 				}, [_ctx.$slots.icon || __props.icon || treeNodeIcon.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: normalizeClass([`${unref(prefixCls)}-icon`, `${unref(prefixCls)}-custom-icon`])
 				}, [_ctx.$slots.icon ? renderSlot(_ctx.$slots, "icon", normalizeProps(mergeProps({ key: 0 }, nodeStatus))) : __props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), normalizeProps(mergeProps({ key: 1 }, nodeStatus)), null, 16)) : treeNodeIcon.value ? (openBlock(), createBlock(resolveDynamicComponent(treeNodeIcon.value), mergeProps({
 					key: 2,
 					node: treeNodeData.value
-				}, nodeStatus), null, 16, ["node"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-title-text`) }, [treeTitle.value ? (openBlock(), createBlock(resolveDynamicComponent(treeTitle.value), { key: 0 })) : renderSlot(_ctx.$slots, "title", {
+				}, nodeStatus), null, 16, ["node"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), createElementVNode("span", { class: normalizeClass(titleTextClassNames.value) }, [shouldRenderEllipsis.value ? (openBlock(), createBlock(resolveDynamicComponent(ellipsisComponent.value), {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-title-ellipsis`)
+				}, {
+					default: withCtx(() => [treeTitle.value ? (openBlock(), createBlock(resolveDynamicComponent(treeTitle.value), { key: 0 })) : renderSlot(_ctx.$slots, "title", {
+						key: 1,
+						title: __props.title
+					}, () => [createTextVNode(toDisplayString(__props.title), 1)])]),
+					_: 3
+				}, 8, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [treeTitle.value ? (openBlock(), createBlock(resolveDynamicComponent(treeTitle.value), { key: 0 })) : renderSlot(_ctx.$slots, "title", {
 					key: 1,
 					title: __props.title
-				}, () => [createTextVNode(toDisplayString(__props.title), 1)]), unref(draggable) ? (openBlock(), createElementBlock("span", {
+				}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 64)), unref(draggable) ? (openBlock(), createElementBlock("span", {
 					key: 2,
 					class: normalizeClass([`${unref(prefixCls)}-icon`, `${unref(prefixCls)}-drag-icon`])
 				}, [_ctx.$slots["drag-icon"] ? renderSlot(_ctx.$slots, "drag-icon", normalizeProps(mergeProps({ key: 0 }, nodeStatus))) : __props.dragIcon ? (openBlock(), createBlock(resolveDynamicComponent(__props.dragIcon), normalizeProps(mergeProps({ key: 1 }, nodeStatus)), null, 16)) : treeDragIcon.value ? (openBlock(), createBlock(resolveDynamicComponent(treeDragIcon.value), mergeProps({

package/es/tree/context.d.ts

@@ -1,5 +1,5 @@
 import { InjectionKey, Slot } from 'vue';
-import type { Node, DropPosition, TreeNodeKey, TreeProps, Key2TreeNode, FilterTreeNode } from './interface';
+import type { Node, DropPosition, TreeNodeKey, TreeProps, Key2TreeNode, FilterTreeNode, TreeNodeDomEventName, TreeNodeSwipeEventData, TreeNodeSwipeEventName } from './interface';
 export declare const TreeInjectionKey: InjectionKey<TreeContext>;
 export type TreeContext = Readonly<{
     treeProps: TreeProps;
@@ -30,4 +30,7 @@ export type TreeContext = Readonly<{
     onDragLeave?: (key: TreeNodeKey, e: DragEvent) => void;
     onDrop?: (key: TreeNodeKey, dropPosition: DropPosition, e: DragEvent) => void;
     allowDrop?: (key: TreeNodeKey, dropPosition: DropPosition) => boolean;
+    onNodeEvent?: (eventName: TreeNodeDomEventName, key: TreeNodeKey, e: Event) => void;
+    onNodeLongPress?: (key: TreeNodeKey, e: PointerEvent) => void;
+    onNodeSwipe?: (eventName: TreeNodeSwipeEventName, key: TreeNodeKey, e: TouchEvent, data: TreeNodeSwipeEventData) => void;
 }>;

package/es/tree/index.d.ts

@@ -1,11 +1,14 @@
 import type { SFCWithInstall } from '../_utils/types';
 import type { TreeProps } from './interface';
 import _Tree from './tree.vue';
-export type { CheckedStrategy, CheckableType, DropPosition, FilterTreeNode, Key2TreeNode, LoadMore, TreeFieldNames, TreeNodeData, TreeNodeKey, TreeProps, } from './interface';
+export type { CheckedStrategy, CheckableType, DropPosition, FilterTreeNode, Key2TreeNode, LoadMore, TreeFieldNames, TreeNodeDomEventName, TreeNodeData, TreeNodeEventHandler, TreeNodeKey, TreeNodeSwipeDirection, TreeNodeSwipeEventData, TreeNodeSwipeEventHandler, TreeNodeSwipeEventName, TreeProps, } from './interface';
 declare const Tree: SFCWithInstall<typeof _Tree>;
 export type TreeInstance = InstanceType<typeof _Tree>;
 export type TreeSelectHandler = NonNullable<TreeProps['onSelect']>;
 export type TreeCheckHandler = NonNullable<TreeProps['onCheck']>;
 export type TreeExpandHandler = NonNullable<TreeProps['onExpand']>;
 export type TreeDropHandler = NonNullable<TreeProps['onDrop']>;
+export type TreeNodeClickHandler = NonNullable<TreeProps['onNodeClick']>;
+export type TreeNodeLongPressHandler = NonNullable<TreeProps['onNodeLongPress']>;
+export type TreeNodeSwipeHandler = NonNullable<TreeProps['onNodeSwipe']>;
 export default Tree;

package/es/tree/interface.d.ts

@@ -2,6 +2,15 @@ import { Slot, VNode } from 'vue';
 import { VirtualListProps } from '../_components/virtual-list/interface';
 import { Size } from '../_utils/constant';
 export type TreeNodeKey = number | string;
+export type TreeEllipsis = boolean | 'performant-ellipsis';
+export type TreeNodeDomEventName = 'click' | 'dblclick' | 'contextmenu' | 'mouseover' | 'mouseenter' | 'mouseleave' | 'mousemove' | 'mouseout' | 'mousedown' | 'mouseup' | 'pointerdown' | 'pointermove' | 'pointerup' | 'pointerenter' | 'pointerleave' | 'pointerover' | 'pointerout' | 'pointercancel' | 'touchstart' | 'touchmove' | 'touchend' | 'touchcancel' | 'keydown' | 'keyup' | 'keypress';
+export type TreeNodeSwipeEventName = 'swipeStart' | 'swipe' | 'swipeEnd';
+export type TreeNodeSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none';
+export interface TreeNodeSwipeEventData {
+    direction: TreeNodeSwipeDirection;
+}
+export type TreeNodeEventHandler<T extends Event = Event> = (node: TreeNodeData, event: T) => void;
+export type TreeNodeSwipeEventHandler = (node: TreeNodeData, event: TouchEvent, data: TreeNodeSwipeEventData) => void;
 export interface TreeNodeData {
     key?: string | number;
     title?: string;
@@ -91,6 +100,7 @@ export interface TreeProps {
     autoExpandParent?: boolean;
     onlyCheckLeaf: boolean;
     animation: boolean;
+    ellipsis: TreeEllipsis;
     actionOnNodeClick?: 'expand';
     disableSelectActionOnly: boolean;
     dragIcon?: Slot;
@@ -128,6 +138,35 @@ export interface TreeProps {
         dropNode: TreeNodeData;
         dropPosition: number;
     }) => void;
+    onNodeClick?: TreeNodeEventHandler;
+    onNodeDblclick?: TreeNodeEventHandler;
+    onNodeContextmenu?: TreeNodeEventHandler;
+    onNodeMouseover?: TreeNodeEventHandler;
+    onNodeMouseenter?: TreeNodeEventHandler;
+    onNodeMouseleave?: TreeNodeEventHandler;
+    onNodeMousemove?: TreeNodeEventHandler;
+    onNodeMouseout?: TreeNodeEventHandler;
+    onNodeMousedown?: TreeNodeEventHandler;
+    onNodeMouseup?: TreeNodeEventHandler;
+    onNodePointerdown?: TreeNodeEventHandler;
+    onNodePointermove?: TreeNodeEventHandler;
+    onNodePointerup?: TreeNodeEventHandler;
+    onNodePointerenter?: TreeNodeEventHandler;
+    onNodePointerleave?: TreeNodeEventHandler;
+    onNodePointerover?: TreeNodeEventHandler;
+    onNodePointerout?: TreeNodeEventHandler;
+    onNodePointercancel?: TreeNodeEventHandler;
+    onNodeTouchstart?: TreeNodeEventHandler;
+    onNodeTouchmove?: TreeNodeEventHandler;
+    onNodeTouchend?: TreeNodeEventHandler;
+    onNodeTouchcancel?: TreeNodeEventHandler;
+    onNodeKeydown?: TreeNodeEventHandler;
+    onNodeKeyup?: TreeNodeEventHandler;
+    onNodeKeypress?: TreeNodeEventHandler;
+    onNodeLongPress?: TreeNodeEventHandler<PointerEvent>;
+    onNodeSwipeStart?: TreeNodeSwipeEventHandler;
+    onNodeSwipe?: TreeNodeSwipeEventHandler;
+    onNodeSwipeEnd?: TreeNodeSwipeEventHandler;
     filterTreeNode?: (node: TreeNodeData) => boolean;
 }
 export type Key2TreeNode = Map<TreeNodeKey, Node>;

package/es/tree/style/index.css

@@ -140,6 +140,28 @@
   position: absolute;
   right: 12px;
 }
+.sd-tree-node-title-block .sd-tree-node-title-text {
+  display: block;
+  width: 100%;
+}
+.sd-tree-node-title-with-ellipsis {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.sd-tree-node-title-text-ellipsis {
+  display: block;
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.sd-tree-node-title-ellipsis {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+}
 .sd-tree-node-indent {
   position: relative;
   flex-shrink: 0;

package/es/tree/style/index.d.ts

@@ -1,3 +1,4 @@
 import '../../style/index.scss';
 import '../../checkbox/style';
+import '../../ellipsis/style';
 import './index.scss';

package/es/tree/style/index.scss

@@ -183,6 +183,31 @@ $tree-node-prefix-cls: string.unquote('#{theme.$prefix}-tree-node');
       position: absolute;
       right: $tree-spacing-drag-icon-right;
     }
+    .#{$tree-node-prefix-cls}-title-text {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  &-node-title-with-ellipsis {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  &-node-title-text-ellipsis {
+    display: block;
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  &-node-title-ellipsis {
+    display: block;
+    width: 100%;
+    max-width: 100%;
   }
 
   &-node-indent {

package/es/tree/tree.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { VirtualListProps, ScrollIntoViewOptions } from '../_components/virtual-list/interface';
-import type { TreeFieldNames, TreeNodeData, FilterTreeNode, TreeNodeKey, CheckedStrategy } from './interface';
+import type { TreeFieldNames, TreeNodeData, FilterTreeNode, TreeNodeKey, CheckedStrategy, TreeNodeSwipeEventData, TreeEllipsis } from './interface';
 declare function toggleCheck(key: TreeNodeKey, e: Event): void;
 declare function scrollIntoView(options: ScrollIntoViewOptions): void;
 declare function getSelectedNodes(): (TreeNodeData | undefined)[];
@@ -123,6 +123,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    ellipsis: {
+        type: PropType<TreeEllipsis>;
+        default: boolean;
+    };
     actionOnNodeClick: {
         type: PropType<"expand">;
     };
@@ -178,6 +182,35 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "update:checkedKeys": (_checkedKeys: (string | number)[]) => any;
     "update:halfCheckedKeys": (_halfCheckedKeys: (string | number)[]) => any;
     "update:expandedKeys": (_expandKeys: (string | number)[]) => any;
+    nodeClick: (_node: TreeNodeData, _event: Event) => any;
+    nodeDblclick: (_node: TreeNodeData, _event: Event) => any;
+    nodeContextmenu: (_node: TreeNodeData, _event: Event) => any;
+    nodeMouseover: (_node: TreeNodeData, _event: Event) => any;
+    nodeMouseenter: (_node: TreeNodeData, _event: Event) => any;
+    nodeMouseleave: (_node: TreeNodeData, _event: Event) => any;
+    nodeMousemove: (_node: TreeNodeData, _event: Event) => any;
+    nodeMouseout: (_node: TreeNodeData, _event: Event) => any;
+    nodeMousedown: (_node: TreeNodeData, _event: Event) => any;
+    nodeMouseup: (_node: TreeNodeData, _event: Event) => any;
+    nodePointerdown: (_node: TreeNodeData, _event: Event) => any;
+    nodePointermove: (_node: TreeNodeData, _event: Event) => any;
+    nodePointerup: (_node: TreeNodeData, _event: Event) => any;
+    nodePointerenter: (_node: TreeNodeData, _event: Event) => any;
+    nodePointerleave: (_node: TreeNodeData, _event: Event) => any;
+    nodePointerover: (_node: TreeNodeData, _event: Event) => any;
+    nodePointerout: (_node: TreeNodeData, _event: Event) => any;
+    nodePointercancel: (_node: TreeNodeData, _event: Event) => any;
+    nodeTouchstart: (_node: TreeNodeData, _event: Event) => any;
+    nodeTouchmove: (_node: TreeNodeData, _event: Event) => any;
+    nodeTouchend: (_node: TreeNodeData, _event: Event) => any;
+    nodeTouchcancel: (_node: TreeNodeData, _event: Event) => any;
+    nodeKeydown: (_node: TreeNodeData, _event: Event) => any;
+    nodeKeyup: (_node: TreeNodeData, _event: Event) => any;
+    nodeKeypress: (_node: TreeNodeData, _event: Event) => any;
+    nodeLongPress: (_node: TreeNodeData, _event: PointerEvent) => any;
+    nodeSwipeStart: (_node: TreeNodeData, _event: TouchEvent, _data: TreeNodeSwipeEventData) => any;
+    nodeSwipe: (_node: TreeNodeData, _event: TouchEvent, _data: TreeNodeSwipeEventData) => any;
+    nodeSwipeEnd: (_node: TreeNodeData, _event: TouchEvent, _data: TreeNodeSwipeEventData) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
         type: PropType<"mini" | "small" | "medium" | "large">;
@@ -285,6 +318,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    ellipsis: {
+        type: PropType<TreeEllipsis>;
+        default: boolean;
+    };
     actionOnNodeClick: {
         type: PropType<"expand">;
     };
@@ -327,9 +364,39 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:checkedKeys"?: ((_checkedKeys: (string | number)[]) => any) | undefined;
     "onUpdate:halfCheckedKeys"?: ((_halfCheckedKeys: (string | number)[]) => any) | undefined;
     "onUpdate:expandedKeys"?: ((_expandKeys: (string | number)[]) => any) | undefined;
+    onNodeClick?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeDblclick?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeContextmenu?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeMouseover?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeMouseenter?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeMouseleave?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeMousemove?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeMouseout?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeMousedown?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeMouseup?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodePointerdown?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodePointermove?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodePointerup?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodePointerenter?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodePointerleave?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodePointerover?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodePointerout?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodePointercancel?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeTouchstart?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeTouchmove?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeTouchend?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeTouchcancel?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeKeydown?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeKeyup?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeKeypress?: ((_node: TreeNodeData, _event: Event) => any) | undefined;
+    onNodeLongPress?: ((_node: TreeNodeData, _event: PointerEvent) => any) | undefined;
+    onNodeSwipeStart?: ((_node: TreeNodeData, _event: TouchEvent, _data: TreeNodeSwipeEventData) => any) | undefined;
+    onNodeSwipe?: ((_node: TreeNodeData, _event: TouchEvent, _data: TreeNodeSwipeEventData) => any) | undefined;
+    onNodeSwipeEnd?: ((_node: TreeNodeData, _event: TouchEvent, _data: TreeNodeSwipeEventData) => any) | undefined;
 }>, {
     size: "small" | "mini" | "medium" | "large";
     data: TreeNodeData[];
+    ellipsis: TreeEllipsis;
     multiple: boolean;
     checkable: boolean | ((node: TreeNodeData, info: {
         level: number;

package/es/tree/tree.vue_vue_type_script_setup_true_lang.js

@@ -198,6 +198,14 @@ var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			default: true
 		},
 		/**
+		* @zh 是否使用 Ellipsis 组件渲染节点标题。传入 `performant-ellipsis` 时使用高性能省略实现。
+		* @en Whether to render node titles with the Ellipsis component. Use `performant-ellipsis` for the performant implementation.
+		*/
+		ellipsis: {
+			type: [Boolean, String],
+			default: false
+		},
+		/**
 		* @zh 点击节点的时候触发的动作
 		* @en The action triggered when the node is clicked
 		* @version 2.27.0
@@ -220,7 +228,36 @@ var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		"dragEnd",
 		"dragOver",
 		"dragLeave",
-		"drop"
+		"drop",
+		"nodeClick",
+		"nodeDblclick",
+		"nodeContextmenu",
+		"nodeMouseover",
+		"nodeMouseenter",
+		"nodeMouseleave",
+		"nodeMousemove",
+		"nodeMouseout",
+		"nodeMousedown",
+		"nodeMouseup",
+		"nodePointerdown",
+		"nodePointermove",
+		"nodePointerup",
+		"nodePointerenter",
+		"nodePointerleave",
+		"nodePointerover",
+		"nodePointerout",
+		"nodePointercancel",
+		"nodeTouchstart",
+		"nodeTouchmove",
+		"nodeTouchend",
+		"nodeTouchcancel",
+		"nodeKeydown",
+		"nodeKeyup",
+		"nodeKeypress",
+		"nodeLongPress",
+		"nodeSwipeStart",
+		"nodeSwipe",
+		"nodeSwipeEnd"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const TREE_VIRTUAL_ITEM_SIZE = {
@@ -561,6 +598,100 @@ var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			const index = currentExpandKeys.value.indexOf(key);
 			if (index > -1) currentExpandKeys.value.splice(index, 1);
 		}
+		function onNodeEvent(eventName, key, event) {
+			const node = key2TreeNode.value.get(key);
+			if (!node) return;
+			const nodeData = node.treeNodeData;
+			switch (eventName) {
+				case "click":
+					emit("nodeClick", nodeData, event);
+					break;
+				case "dblclick":
+					emit("nodeDblclick", nodeData, event);
+					break;
+				case "contextmenu":
+					emit("nodeContextmenu", nodeData, event);
+					break;
+				case "mouseover":
+					emit("nodeMouseover", nodeData, event);
+					break;
+				case "mouseenter":
+					emit("nodeMouseenter", nodeData, event);
+					break;
+				case "mouseleave":
+					emit("nodeMouseleave", nodeData, event);
+					break;
+				case "mousemove":
+					emit("nodeMousemove", nodeData, event);
+					break;
+				case "mouseout":
+					emit("nodeMouseout", nodeData, event);
+					break;
+				case "mousedown":
+					emit("nodeMousedown", nodeData, event);
+					break;
+				case "mouseup":
+					emit("nodeMouseup", nodeData, event);
+					break;
+				case "pointerdown":
+					emit("nodePointerdown", nodeData, event);
+					break;
+				case "pointermove":
+					emit("nodePointermove", nodeData, event);
+					break;
+				case "pointerup":
+					emit("nodePointerup", nodeData, event);
+					break;
+				case "pointerenter":
+					emit("nodePointerenter", nodeData, event);
+					break;
+				case "pointerleave":
+					emit("nodePointerleave", nodeData, event);
+					break;
+				case "pointerover":
+					emit("nodePointerover", nodeData, event);
+					break;
+				case "pointerout":
+					emit("nodePointerout", nodeData, event);
+					break;
+				case "pointercancel":
+					emit("nodePointercancel", nodeData, event);
+					break;
+				case "touchstart":
+					emit("nodeTouchstart", nodeData, event);
+					break;
+				case "touchmove":
+					emit("nodeTouchmove", nodeData, event);
+					break;
+				case "touchend":
+					emit("nodeTouchend", nodeData, event);
+					break;
+				case "touchcancel":
+					emit("nodeTouchcancel", nodeData, event);
+					break;
+				case "keydown":
+					emit("nodeKeydown", nodeData, event);
+					break;
+				case "keyup":
+					emit("nodeKeyup", nodeData, event);
+					break;
+				case "keypress":
+					emit("nodeKeypress", nodeData, event);
+					break;
+			}
+		}
+		function onNodeLongPress(key, event) {
+			const node = key2TreeNode.value.get(key);
+			if (!node) return;
+			emit("nodeLongPress", node.treeNodeData, event);
+		}
+		function onNodeSwipe(eventName, key, event, swipeData) {
+			const node = key2TreeNode.value.get(key);
+			if (!node) return;
+			if (eventName === "swipeStart") emit("nodeSwipeStart", node.treeNodeData, event, swipeData);
+			else if (eventName === "swipe") emit("nodeSwipe", node.treeNodeData, event, swipeData);
+			else emit("nodeSwipeEnd", node.treeNodeData, event, swipeData);
+		}
 		const treeContext = reactive({
 			treeProps: props,
 			switcherIcon,
@@ -604,6 +735,9 @@ var tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			onSelect,
 			onExpand,
 			onExpandEnd,
+			onNodeEvent,
+			onNodeLongPress,
+			onNodeSwipe,
 			allowDrop(key, dropPosition) {
 				const node = key2TreeNode.value.get(key);
 				if (node && isFunction(allowDrop.value)) return !!allowDrop.value({

package/json/vetur-attributes.json

@@ -1167,6 +1167,54 @@
     "description": "Whether to use in ConfigProvider",
     "type": "boolean"
   },
+  "sd-file-previewer/close": {
+    "description": "Close event"
+  },
+  "sd-file-previewer/visible-change": {
+    "description": "Visible state change"
+  },
+  "sd-file-previewer/src": {
+    "description": "File source url",
+    "type": "string"
+  },
+  "sd-file-previewer/type": {
+    "description": "Preview type, decides which previewer to use"
+  },
+  "sd-file-previewer/visible": {
+    "description": "Whether the previewer is visible",
+    "type": "boolean"
+  },
+  "sd-file-previewer/default-visible": {
+    "description": "Default visibility",
+    "type": "boolean"
+  },
+  "sd-file-previewer/fullscreen": {
+    "description": "Whether to show the previewer in fullscreen overlay",
+    "type": "boolean"
+  },
+  "sd-file-previewer/title": {
+    "description": "Title",
+    "type": "string"
+  },
+  "sd-file-previewer/mask-closable": {
+    "description": "Whether to close when mask is clicked",
+    "type": "boolean"
+  },
+  "sd-file-previewer/closable": {
+    "description": "Whether to show close button",
+    "type": "boolean"
+  },
+  "sd-file-previewer/esc-to-close": {
+    "description": "Whether to support closing with ESC",
+    "type": "boolean"
+  },
+  "sd-file-previewer/popup-container": {
+    "description": "Set the mount point, same as teleport to"
+  },
+  "sd-file-previewer/render-to-body": {
+    "description": "Whether to render to body",
+    "type": "boolean"
+  },
   "sd-form-item/field": {
     "description": "The path of the form element in the data object (required for the data item)",
     "type": "string"
@@ -3962,6 +4010,15 @@
   "sd-tree/drop": {
     "description": "The node is released on a releasable target"
   },
+  "sd-tree/node-click": {
+    "description": "Triggered when basic DOM events are fired on the node title area"
+  },
+  "sd-tree/node-long-press": {
+    "description": "Triggered when the node title area is long pressed"
+  },
+  "sd-tree/node-swipe-start": {
+    "description": "Triggered when the node title area is swiped"
+  },
   "sd-tree/size": {
     "description": "Size",
     "type": "string"
@@ -4056,6 +4113,9 @@
     "description": "Whether to enable expand transition animation",
     "type": "boolean"
   },
+  "sd-tree/ellipsis": {
+    "description": "Whether to render node titles with the Ellipsis component. Use `performant-ellipsis` for the performant implementation."
+  },
   "sd-tree/action-on-node-click": {
     "description": "The action triggered when the node is clicked"
   },