@sdata/web-vue 3.20.0 → 3.22.0

package/es/select/index.d.ts

@@ -116,6 +116,10 @@ declare const Select: {
             type: import("vue").PropType<import("./interface").SelectOption[]>;
             default: () => never[];
         };
+        ellipsis: {
+            type: import("vue").PropType<boolean | "performant-ellipsis">;
+            default: boolean;
+        };
         virtualListProps: {
             type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps>;
         };
@@ -197,6 +201,7 @@ declare const Select: {
     }, import("vue").PublicProps, {
         options: import("./interface").SelectOption[];
         show: boolean;
+        ellipsis: boolean | "performant-ellipsis";
         scrollbar: boolean | import("..").ScrollbarProps;
         multiple: boolean;
         disabled: boolean;
@@ -1474,6 +1479,10 @@ declare const Select: {
             type: import("vue").PropType<import("./interface").SelectOption[]>;
             default: () => never[];
         };
+        ellipsis: {
+            type: import("vue").PropType<boolean | "performant-ellipsis">;
+            default: boolean;
+        };
         virtualListProps: {
             type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps>;
         };
@@ -1540,6 +1549,7 @@ declare const Select: {
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         options: import("./interface").SelectOption[];
         show: boolean;
+        ellipsis: boolean | "performant-ellipsis";
         scrollbar: boolean | import("..").ScrollbarProps;
         multiple: boolean;
         disabled: boolean;
@@ -1691,6 +1701,10 @@ declare const Select: {
         type: import("vue").PropType<import("./interface").SelectOption[]>;
         default: () => never[];
     };
+    ellipsis: {
+        type: import("vue").PropType<boolean | "performant-ellipsis">;
+        default: boolean;
+    };
     virtualListProps: {
         type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps>;
     };
@@ -1772,6 +1786,7 @@ declare const Select: {
 }, string, {
     options: import("./interface").SelectOption[];
     show: boolean;
+    ellipsis: boolean | "performant-ellipsis";
     scrollbar: boolean | import("..").ScrollbarProps;
     multiple: boolean;
     disabled: boolean;
@@ -2932,5 +2947,5 @@ declare const Select: {
     install: (app: App, options?: SDOptions) => void;
 };
 export type SelectInstance = InstanceType<typeof _Select>;
-export type { SelectProps, SelectOption, SelectOptionData, SelectOptionGroup, SelectFieldNames, FilterOption, SelectFallbackOption, } from './interface';
+export type { SelectProps, SelectOption, SelectOptionData, SelectOptionGroup, SelectFieldNames, SelectTriggerSlotProps, FilterOption, SelectFallbackOption, } from './interface';
 export default Select;

package/es/select/interface.d.ts

@@ -5,6 +5,16 @@ import type { ScrollbarProps } from '../scrollbar';
 import type { TriggerProps } from '../trigger';
 export type SelectOptionValue = string | number | boolean | Record<string, unknown>;
 export type SelectModelValue = SelectOptionValue | SelectOptionValue[] | null | undefined;
+export interface SelectTriggerSlotProps {
+    value: SelectModelValue;
+    displayValue: string | string[];
+    inputValue: string;
+    selectedOptions: SelectOptionData[];
+    popupVisible: boolean;
+    disabled: boolean;
+    loading: boolean;
+    multiple: boolean;
+}
 export interface OptionValueWithKey {
     value: SelectOptionValue;
     key: string;
@@ -46,6 +56,7 @@ export type FilterOption = boolean | ((inputValue: string, option: SelectOptionD
 export type SelectFallbackOption = (value: SelectOptionValue) => SelectOptionData;
 export interface SelectProps extends FitWidthProps {
     options?: SelectOption[];
+    ellipsis?: boolean | 'performant-ellipsis';
     multiple?: boolean;
     value?: SelectModelValue;
     modelValue?: SelectModelValue;

package/es/select/select.d.ts

@@ -121,6 +121,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<SelectOption[]>;
         default: () => never[];
     };
+    ellipsis: {
+        type: PropType<boolean | "performant-ellipsis">;
+        default: boolean;
+    };
     virtualListProps: {
         type: PropType<VirtualListProps>;
     };
@@ -298,6 +302,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<SelectOption[]>;
         default: () => never[];
     };
+    ellipsis: {
+        type: PropType<boolean | "performant-ellipsis">;
+        default: boolean;
+    };
     virtualListProps: {
         type: PropType<VirtualListProps>;
     };
@@ -364,6 +372,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     options: SelectOption[];
     show: boolean;
+    ellipsis: boolean | "performant-ellipsis";
     scrollbar: boolean | ScrollbarProps;
     multiple: boolean;
     disabled: boolean;

package/es/select/select.js

@@ -13,6 +13,7 @@ import Tooltip from "../tooltip/index.js";
 import { getKeyFromValue, hasEmptyStringKey, isGroupOptionInfo, isValidOption } from "./utils.js";
 import { useSelect } from "./hooks/use-select.js";
 import select_dropdown_default from "./select-dropdown.js";
+import Ellipsis, { PerformantEllipsis } from "../ellipsis/index.js";
 import { debounce } from "../_utils/debounce.js";
 import select_view_default from "../_components/select-view/select-view.js";
 import { useAllowSearch } from "../_hooks/use-allow-search.js";
@@ -169,6 +170,14 @@ var select_default = /* @__PURE__ */ defineComponent({
 			type: Array,
 			default: () => []
 		},
+		/**
+		* @zh 是否使用 Ellipsis 组件渲染选项。传入 `performant-ellipsis` 时使用高性能省略实现
+		* @en Whether to render options with the Ellipsis component. Use `performant-ellipsis` for the performant implementation
+		*/
+		ellipsis: {
+			type: [Boolean, String],
+			default: true
+		},
 		virtualListProps: { type: Object },
 		triggerProps: { type: Object },
 		floatingOptions: { type: Object },
@@ -468,8 +477,20 @@ var select_default = /* @__PURE__ */ defineComponent({
 			}
 			return result;
 		});
-		const ellipsisPrefixCls = getPrefixCls("ellipsis");
-		const renderOptionEllipsis = (label) => createVNode("span", { "class": [ellipsisPrefixCls, `${ellipsisPrefixCls}--single-line`] }, [createVNode("span", { "class": `${ellipsisPrefixCls}-content` }, [label])]);
+		const triggerValue = computed(() => {
+			const values = computedValueObjects.value.map((item) => item.value);
+			return props.multiple ? values : values[0];
+		});
+		const triggerDisplayValue = computed(() => {
+			var _labels$;
+			const labels = selectViewValue.value.map((item) => String(item.label));
+			return props.multiple ? labels : (_labels$ = labels[0]) !== null && _labels$ !== void 0 ? _labels$ : "";
+		});
+		const triggerSelectedOptions = computed(() => selectViewValue.value.map((item) => item.option).filter((option) => Boolean(option)));
+		const renderOptionEllipsis = (label) => {
+			if (props.ellipsis === false) return label;
+			return createVNode(props.ellipsis === "performant-ellipsis" ? PerformantEllipsis : Ellipsis, null, _isSlot(label) ? label : { default: () => [label] });
+		};
 		const getOptionContentFunc = (optionInfo) => {
 			if (isFunction(slots.option)) return () => {
 				var _slots$option;
@@ -610,7 +631,16 @@ var select_default = /* @__PURE__ */ defineComponent({
 			}, props.triggerProps, { "floatingOptions": (_props$floatingOption = props.floatingOptions) !== null && _props$floatingOption !== void 0 ? _props$floatingOption : (_props$triggerProps = props.triggerProps) === null || _props$triggerProps === void 0 ? void 0 : _props$triggerProps.floatingOptions }), {
 				default: () => {
 					var _slots$trigger, _slots$trigger2;
-					return [(_slots$trigger = (_slots$trigger2 = slots.trigger) === null || _slots$trigger2 === void 0 ? void 0 : _slots$trigger2.call(slots)) !== null && _slots$trigger !== void 0 ? _slots$trigger : createVNode(select_view_default, mergeProps({
+					return [(_slots$trigger = (_slots$trigger2 = slots.trigger) === null || _slots$trigger2 === void 0 ? void 0 : _slots$trigger2.call(slots, {
+						value: triggerValue.value,
+						displayValue: triggerDisplayValue.value,
+						inputValue: computedInputValue.value,
+						selectedOptions: triggerSelectedOptions.value,
+						popupVisible: computedPopupVisible.value,
+						disabled: mergedDisabled.value,
+						loading: props.loading,
+						multiple: props.multiple
+					})) !== null && _slots$trigger !== void 0 ? _slots$trigger : createVNode(select_view_default, mergeProps({
 						"ref": selectViewRef,
 						"class": prefixCls,
 						"modelValue": selectViewValue.value,

package/es/time-picker/index.d.ts

@@ -368,6 +368,17 @@ declare const TimePicker: {
     hideDisabledOptions: boolean;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
+        trigger?: (props: {
+            value: string | (string | undefined)[] | undefined;
+            date: Date | (Date | undefined)[] | undefined;
+            displayValue: string | (string | undefined)[];
+            inputValue: string | (string | undefined)[] | undefined;
+            popupVisible: boolean;
+            disabled: boolean;
+            readonly: boolean;
+            range: boolean;
+        }) => any;
+    } & {
         prefix?: (props: {}) => any;
     } & {
         'suffix-icon'?: (props: {}) => any;
@@ -378,5 +389,5 @@ declare const TimePicker: {
     install: (app: App, options?: SDOptions) => void;
 };
 export type TimePickerInstance = InstanceType<typeof _TimePicker>;
-export type { TimeValue } from './interface';
+export type { TimePickerTriggerSlotProps, TimeValue } from './interface';
 export default TimePicker;

package/es/time-picker/interface.d.ts

@@ -1,5 +1,15 @@
 import { Dayjs } from 'dayjs';
 export type TimeValue = Date | string | number;
+export interface TimePickerTriggerSlotProps {
+    value: string | Array<string | undefined> | undefined;
+    date: Date | Array<Date | undefined> | undefined;
+    displayValue: string | Array<string | undefined>;
+    inputValue: string | Array<string | undefined> | undefined;
+    popupVisible: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    range: boolean;
+}
 export interface BasePanelProps {
     disableConfirm: boolean;
     use12Hours: boolean;

package/es/time-picker/time-picker.vue.d.ts

@@ -2,13 +2,24 @@ import { PropType } from 'vue';
 import type { FloatingOptions } from '../_utils/floating';
 import { Size } from '../_utils/constant';
 import { TriggerProps } from '../trigger';
-declare var __VLS_21: {}, __VLS_24: {}, __VLS_42: {};
+declare var __VLS_10: {
+    value: string | (string | undefined)[] | undefined;
+    date: Date | (Date | undefined)[] | undefined;
+    displayValue: string | (string | undefined)[];
+    inputValue: string | (string | undefined)[] | undefined;
+    popupVisible: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    range: boolean;
+}, __VLS_23: {}, __VLS_26: {}, __VLS_44: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_21) => any;
+    trigger?: (props: typeof __VLS_10) => any;
+} & {
+    prefix?: (props: typeof __VLS_23) => any;
 } & {
-    'suffix-icon'?: (props: typeof __VLS_24) => any;
+    'suffix-icon'?: (props: typeof __VLS_26) => any;
 } & {
-    extra?: (props: typeof __VLS_42) => any;
+    extra?: (props: typeof __VLS_44) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     type: {

package/es/time-picker/time-picker.vue_vue_type_script_setup_true_lang.js

@@ -201,6 +201,11 @@ var time_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const props = __props;
 		const emit = __emit;
 		/**
+		* @zh 自定义触发元素
+		* @en Custom trigger element
+		* @slot trigger
+		*/
+		/**
 		* @zh 输入框前缀
 		* @en Input box prefix
 		* @slot prefix
@@ -236,6 +241,12 @@ var time_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			isRange,
 			format: computedFormat
 		}));
+		const triggerValue = computed(() => getFormattedValue(computedValue.value, computedFormat.value));
+		const triggerDate = computed(() => getDateValue(computedValue.value));
+		const triggerDisplayValue = computed(() => {
+			var _triggerValue$value;
+			return (_triggerValue$value = triggerValue.value) !== null && _triggerValue$value !== void 0 ? _triggerValue$value : isRange.value ? [] : "";
+		});
 		const [panelVisible, setLocalVisible] = useMergeState(defaultPopupVisible.value, reactive({ value: popupVisible }));
 		const setPanelVisible = (newVisible) => {
 			if (newVisible !== panelVisible.value) {
@@ -438,7 +449,16 @@ var time_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					"hide-disabled-options",
 					"hide-footer"
 				]))], 2)]),
-				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(InputComponent.value), mergeProps(_objectSpread2(_objectSpread2({}, _ctx.$attrs), inputProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", {
+					value: triggerValue.value,
+					date: triggerDate.value,
+					displayValue: triggerDisplayValue.value,
+					inputValue: unref(inputValue),
+					popupVisible: unref(panelVisible),
+					disabled: unref(mergedDisabled),
+					readonly: Boolean(__props.readonly),
+					range: isRange.value
+				}, () => [(openBlock(), createBlock(resolveDynamicComponent(InputComponent.value), mergeProps(_objectSpread2(_objectSpread2({}, _ctx.$attrs), inputProps.value), {
 					ref_key: "refInput",
 					ref: refInput,
 					"input-value": unref(inputValue),
@@ -483,7 +503,7 @@ var time_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					"fit-width-fallback",
 					"fit-width-fallback-text",
 					"onClear"
-				]))]),
+				]))])]),
 				_: 3
 			}, 16, [
 				"position",

package/es/tree-select/index.d.ts

@@ -1,7 +1,7 @@
 import type { SFCWithInstall } from '../_utils/types';
 import type { TreeSelectProps } from './interface';
 import _TreeSelect from './tree-select.vue';
-export type { ChangeHandler as TreeSelectChangeHandler, ClearHandler as TreeSelectClearHandler, FallbackOption as TreeSelectFallbackOption, FilterTreeNode as TreeSelectFilterTreeNode, LabelValue, PopupVisibleChangeHandler as TreeSelectPopupVisibleChangeHandler, SearchHandler as TreeSelectSearchHandler, TreeSelectProps, TreeSelectValue, } from './interface';
+export type { ChangeHandler as TreeSelectChangeHandler, ClearHandler as TreeSelectClearHandler, FallbackOption as TreeSelectFallbackOption, FilterTreeNode as TreeSelectFilterTreeNode, LabelValue, PopupVisibleChangeHandler as TreeSelectPopupVisibleChangeHandler, SearchHandler as TreeSelectSearchHandler, TreeSelectProps, TreeSelectTriggerSlotProps, TreeSelectValue, } from './interface';
 declare const TreeSelect: SFCWithInstall<typeof _TreeSelect>;
 export type TreeSelectInstance = InstanceType<typeof _TreeSelect>;
 export type TreeSelectLoadMore = NonNullable<TreeSelectProps['loadMore']>;

package/es/tree-select/interface.d.ts

@@ -9,6 +9,16 @@ export interface LabelValue {
     label: string | number;
 }
 export type TreeSelectValue = TreeNodeKey | TreeNodeKey[] | LabelValue | LabelValue[];
+export interface TreeSelectTriggerSlotProps {
+    value: TreeSelectValue | undefined;
+    displayValue: string | string[];
+    inputValue: string;
+    selectedOptions: TreeNodeData[];
+    popupVisible: boolean;
+    disabled: boolean;
+    loading: boolean;
+    multiple: boolean;
+}
 export type FilterTreeNode = (searchKey: string, nodeData: TreeNodeData) => boolean;
 export type FallbackOption = boolean | ((key: TreeNodeKey) => TreeNodeData | boolean);
 export type ChangeHandler = (selectedValue: TreeSelectValue | undefined) => void;
@@ -37,6 +47,7 @@ export interface TreeSelectProps extends FitWidthProps {
     fieldNames: TreeFieldNames | undefined;
     data: TreeNodeData[];
     options: TreeNodeData[] | undefined;
+    ellipsis: TreeProps['ellipsis'] | undefined;
     labelInValue: boolean;
     treeCheckable: boolean;
     checkable: boolean | undefined;

package/es/tree-select/panel.d.ts

@@ -4,6 +4,7 @@ import { ScrollbarProps } from '../scrollbar';
 import { TreeProps, TreeNodeKey } from '../tree/interface';
 type TreeSelectPanelComponent = DefineComponent<{
     treeProps: Partial<TreeProps> | undefined;
+    ellipsis: TreeProps['ellipsis'];
     selectedKeys: TreeNodeKey[] | undefined;
     showCheckable: boolean;
     treeSlots: Slots;

package/es/tree-select/panel.js

@@ -16,6 +16,10 @@ var panel_default = /* @__PURE__ */ defineComponent({
 			type: Object,
 			default: () => ({})
 		},
+		ellipsis: {
+			type: [Boolean, String],
+			default: false
+		},
 		selectedKeys: { type: Array },
 		showCheckable: { type: Boolean },
 		treeSlots: {
@@ -54,6 +58,7 @@ var panel_default = /* @__PURE__ */ defineComponent({
 		};
 		const renderTree = () => {
 			return createVNode(Tree, mergeProps({ "ref": refTree }, computedTreeProps.value, {
+				"ellipsis": props.ellipsis,
 				"onSelect": onSelect,
 				"onCheck": onCheck
 			}), props.treeSlots);

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

@@ -7,7 +7,16 @@ import { ScrollbarProps } from '../scrollbar';
 import { TreeFieldNames, TreeNodeData, TreeProps } from '../tree/interface';
 import { TriggerProps } from '../trigger';
 import { LabelValue, TreeSelectValue } from './interface';
-declare var __VLS_16: {}, __VLS_32: {}, __VLS_35: any, __VLS_38: {
+declare var __VLS_16: {
+    value: TreeSelectValue | undefined;
+    displayValue: string | string[];
+    inputValue: string;
+    selectedOptions: TreeNodeData[];
+    popupVisible: boolean;
+    disabled: boolean;
+    loading: boolean;
+    multiple: boolean;
+}, __VLS_32: {}, __VLS_35: any, __VLS_38: {
     data: any;
 }, __VLS_41: {}, __VLS_43: {}, __VLS_50: {}, __VLS_64: {};
 type __VLS_Slots = {} & {
@@ -102,6 +111,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     options: {
         type: PropType<TreeNodeData[]>;
     };
+    ellipsis: {
+        type: PropType<TreeProps["ellipsis"]>;
+        default: undefined;
+    };
     labelInValue: {
         type: BooleanConstructor;
     };
@@ -293,6 +306,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     options: {
         type: PropType<TreeNodeData[]>;
     };
+    ellipsis: {
+        type: PropType<TreeProps["ellipsis"]>;
+        default: undefined;
+    };
     labelInValue: {
         type: BooleanConstructor;
     };
@@ -411,6 +428,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onPopup-visible-change"?: ((_visible: boolean) => any) | undefined;
 }>, {
     show: boolean;
+    ellipsis: import("../tree/interface").TreeEllipsis;
     separator: string;
     scrollbar: boolean | ScrollbarProps;
     border: boolean;

package/es/tree-select/tree-select.vue_vue_type_script_setup_true_lang.js

@@ -167,6 +167,14 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		* */
 		options: { type: Array },
 		/**
+		* @zh 是否使用 Ellipsis 组件渲染选项。传入 `performant-ellipsis` 时使用高性能省略实现
+		* @en Whether to render options with the Ellipsis component. Use `performant-ellipsis` for the performant implementation
+		*/
+		ellipsis: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		/**
 		* @zh 设置value格式。默认是string，设置为true时候，value格式为： { label: string, value: string }
 		* @en Set the value format. The default is string, when set to true, the value format is: {label: string, value: string}
 		* */
@@ -439,8 +447,8 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		});
 		const { mergedAllowClear } = useAllowClear(computed(() => props.allowClear || props.clearable));
 		const { mergedDropdownVirtualListProps } = useDropdownVirtualListProps(computed(() => {
-			var _props$virtualListPro, _treeProps$value;
-			return (_props$virtualListPro = props.virtualListProps) !== null && _props$virtualListPro !== void 0 ? _props$virtualListPro : (_treeProps$value = treeProps.value) === null || _treeProps$value === void 0 ? void 0 : _treeProps$value.virtualListProps;
+			var _ref, _props$virtualListPro, _treeProps$value;
+			return (_ref = (_props$virtualListPro = props.virtualListProps) !== null && _props$virtualListPro !== void 0 ? _props$virtualListPro : (_treeProps$value = treeProps.value) === null || _treeProps$value === void 0 ? void 0 : _treeProps$value.virtualListProps) !== null && _ref !== void 0 ? _ref : props.virtualScroll === true ? {} : void 0;
 		}));
 		const TreeSelectEmpty = configCtx === null || configCtx === void 0 || (_configCtx$slots$empt = (_configCtx$slots = configCtx.slots).empty) === null || _configCtx$slots$empt === void 0 || (_configCtx$slots$empt = _configCtx$slots$empt.call(_configCtx$slots, { component: "tree-select" })) === null || _configCtx$slots$empt === void 0 ? void 0 : _configCtx$slots$empt[0];
 		const mergedModelValue = computed(() => modelValue.value);
@@ -454,9 +462,13 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			return (_checkStrategy$value = checkStrategy.value) !== null && _checkStrategy$value !== void 0 ? _checkStrategy$value : props.treeCheckedStrategy;
 		});
 		const mergedTreeProps = computed(() => {
+			var _ref3, _props$ellipsis2, _treeProps$value3;
 			const resolvedVirtualListProps = resolveDropdownVirtualListProps(mergedDropdownVirtualListProps.value, props.triggerProps);
-			if (virtualScroll.value !== false) return _objectSpread2(_objectSpread2({}, treeProps.value), resolvedVirtualListProps ? { virtualListProps: resolvedVirtualListProps } : {});
-			const nextTreeProps = _objectSpread2({}, treeProps.value);
+			if (virtualScroll.value !== false) {
+				var _ref2, _props$ellipsis, _treeProps$value2;
+				return _objectSpread2(_objectSpread2({}, treeProps.value), {}, { ellipsis: (_ref2 = (_props$ellipsis = props.ellipsis) !== null && _props$ellipsis !== void 0 ? _props$ellipsis : (_treeProps$value2 = treeProps.value) === null || _treeProps$value2 === void 0 ? void 0 : _treeProps$value2.ellipsis) !== null && _ref2 !== void 0 ? _ref2 : true }, resolvedVirtualListProps ? { virtualListProps: resolvedVirtualListProps } : {});
+			}
+			const nextTreeProps = _objectSpread2(_objectSpread2({}, treeProps.value), {}, { ellipsis: (_ref3 = (_props$ellipsis2 = props.ellipsis) !== null && _props$ellipsis2 !== void 0 ? _props$ellipsis2 : (_treeProps$value3 = treeProps.value) === null || _treeProps$value3 === void 0 ? void 0 : _treeProps$value3.ellipsis) !== null && _ref3 !== void 0 ? _ref3 : true });
 			delete nextTreeProps.virtualListProps;
 			return nextTreeProps;
 		});
@@ -504,6 +516,16 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				return _objectSpread2(_objectSpread2({}, i), {}, { option: node === null || node === void 0 ? void 0 : node.treeNodeData });
 			});
 		});
+		const triggerValue = computed(() => {
+			const values = labelInValue.value ? selectedValue.value : selectedKeys.value;
+			return isMultiple.value ? values : values === null || values === void 0 ? void 0 : values[0];
+		});
+		const triggerDisplayValue = computed(() => {
+			var _labels$;
+			const labels = selectViewValue.value.map((item) => String(item.label));
+			return isMultiple.value ? labels : (_labels$ = labels[0]) !== null && _labels$ !== void 0 ? _labels$ : "";
+		});
+		const triggerSelectedOptions = computed(() => selectViewValue.value.map((item) => item.option).filter((option) => Boolean(option)));
 		const setSelectedKeys = (newVal) => {
 			setLocalSelectedKeys(newVal);
 			nextTick(() => {
@@ -662,6 +684,7 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 								"selected-keys": unref(selectedKeys),
 								"show-checkable": mergedTreeCheckable.value,
 								scrollbar: __props.scrollbar,
+								ellipsis: mergedTreeProps.value.ellipsis,
 								"tree-props": _objectSpread2(_objectSpread2({
 									actionOnNodeClick: unref(selectable) === "leaf" ? "expand" : void 0,
 									blockNode: true
@@ -684,6 +707,7 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 								"selected-keys",
 								"show-checkable",
 								"scrollbar",
+								"ellipsis",
 								"tree-props",
 								"tree-slots"
 							])),
@@ -692,7 +716,16 @@ var tree_select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 								class: normalizeClass(`${unref(prefixCls)}-footer`)
 							}, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("", true)
 						], 6)]),
-						default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(select_view_default), mergeProps({
+						default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", {
+							value: triggerValue.value,
+							displayValue: triggerDisplayValue.value,
+							inputValue: computedInputValue.value,
+							selectedOptions: triggerSelectedOptions.value,
+							popupVisible: unref(panelVisible),
+							disabled: unref(mergedDisabled),
+							loading: __props.loading,
+							multiple: isMultiple.value
+						}, () => [createVNode(unref(select_view_default), mergeProps({
 							ref_key: "refSelectView",
 							ref: refSelectView,
 							"model-value": selectViewValue.value,

package/json/vetur-attributes.json

@@ -2986,6 +2986,9 @@
     "description": "Whether it is read-only",
     "type": "boolean|string"
   },
+  "sd-select/ellipsis": {
+    "description": "Whether to render options with the Ellipsis component. Use `performant-ellipsis` for the performant implementation"
+  },
   "sd-sender-header/open": {
     "description": "Whether the header is expanded",
     "type": "boolean"
@@ -4309,6 +4312,9 @@
   "sd-tree-select/options": {
     "description": "Data, Naive compatibility alias"
   },
+  "sd-tree-select/ellipsis": {
+    "description": "Whether to render options with the Ellipsis component. Use `performant-ellipsis` for the performant implementation"
+  },
   "sd-tree-select/label-in-value": {
     "description": "Set the value format. The default is string, when set to true, the value format is: {label: string, value: string}",
     "type": "boolean"

package/json/vetur-tags.json

@@ -1211,7 +1211,8 @@
       "fit-width",
       "max-wfull",
       "spin-props",
-      "readonly"
+      "readonly",
+      "ellipsis"
     ]
   },
   "sd-selectable-card": {
@@ -1726,6 +1727,7 @@
       "field-names",
       "data",
       "options",
+      "ellipsis",
       "label-in-value",
       "tree-checkable",
       "checkable",

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "3.19.0",
+  "version": "3.21.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -7277,6 +7277,14 @@
                 "type": "boolean|string",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "ellipsis",
+              "description": "Whether to render options with the Ellipsis component. Use `performant-ellipsis` for the performant implementation",
+              "value": {
+                "type": "boolean | 'performant-ellipsis'",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],
@@ -10407,6 +10415,14 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "ellipsis",
+              "description": "Whether to render options with the Ellipsis component. Use `performant-ellipsis` for the performant implementation",
+              "value": {
+                "type": "TreeProps['ellipsis']",
+                "kind": "expression"
+              }
+            },
             {
               "name": "label-in-value",
               "description": "Set the value format. The default is string, when set to true, the value format is: {label: string, value: string}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "3.20.0",
+  "version": "3.22.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",