@sdata/web-vue 4.1.0 → 4.3.0

package/es/ellipsis/ellipsis.vue_vue_type_script_setup_true_lang.js

@@ -2,10 +2,10 @@ import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/es
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isObject } from "../_utils/is.js";
 import _objectWithoutProperties from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectWithoutProperties.js";
-import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
 import resize_observer_v2_default from "../_components/resize-observer-v2.js";
+import { RichLineClamp } from "../clamp/index.js";
 import Tooltip from "../tooltip/index.js";
-import { computed, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, onMounted, onUpdated, openBlock, ref, renderSlot, resolveDynamicComponent, unref, watch, withCtx } from "vue";
+import { computed, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUpdated, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, watch, withCtx } from "vue";
 //#region components/ellipsis/ellipsis.vue?vue&type=script&setup=true&lang.ts
 var _excluded = ["disabled"];
 var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
@@ -14,56 +14,40 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 }), {}, {
 	__name: "ellipsis",
 	props: {
-		/**
-		* @zh 最大显示行数。不传时为单行省略。
-		* @en Maximum number of displayed lines. Single-line ellipsis is used by default.
-		*/
+		/** @zh 最大显示行数。不传时为单行省略。 @en Maximum displayed lines. */
 		lineClamp: {
 			type: [Number, String],
 			default: void 0
 		},
-		/**
-		* @zh 展开的触发方式
-		* @en Trigger mode for expansion
-		* @values 'click'
-		*/
+		/** @zh 展开的触发方式 @en Trigger mode for expansion */
 		expandTrigger: {
 			type: String,
 			default: void 0
 		},
-		/**
-		* @zh 省略时是否展示提示。可传入 Tooltip 属性。
-		* @en Whether to show a tooltip when ellipsis is active. Tooltip props are supported.
-		*/
+		/** @zh 省略时是否展示提示。 @en Whether to show a tooltip when clamped. */
 		tooltip: {
 			type: [Boolean, Object],
 			default: true
 		}
 	},
-	setup(__props) {
+	setup(__props, { expose: __expose }) {
 		const props = __props;
-		/**
-		* @zh 默认内容
-		* @en Default content
-		* @slot default
-		*/
-		/**
-		* @zh 自定义提示内容
-		* @en Custom tooltip content
-		* @slot tooltip
-		*/
 		const prefixCls = getPrefixCls("ellipsis");
-		const triggerRef = ref();
-		const contentRef = ref();
-		const text = ref("");
-		const isEllipsis = ref(false);
-		const expanded = ref(false);
+		const triggerRef = shallowRef();
+		const text = shallowRef("");
+		const measurementHtml = shallowRef("");
+		const measurementWidth = shallowRef(0);
+		const measurementPadding = shallowRef("0");
+		const isEllipsis = shallowRef(false);
+		const expanded = shallowRef(false);
 		const isLineClamp = computed(() => props.lineClamp !== void 0);
 		const componentTag = computed(() => isLineClamp.value ? "div" : "span");
-		const tooltipConfig = computed(() => {
-			if (isObject(props.tooltip)) return props.tooltip;
-			return {};
+		const maxLines = computed(() => {
+			if (props.lineClamp === void 0) return 1;
+			const value = Number(props.lineClamp);
+			return Number.isFinite(value) && value > 0 ? value : 1;
 		});
+		const tooltipConfig = computed(() => isObject(props.tooltip) ? props.tooltip : {});
 		const tooltipBindings = computed(() => {
 			const _tooltipConfig$value = tooltipConfig.value, { disabled: _disabled } = _tooltipConfig$value;
 			return _objectWithoutProperties(_tooltipConfig$value, _excluded);
@@ -78,103 +62,95 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			[`${prefixCls}--expanded`]: expanded.value
 		}]);
 		const rootStyle = computed(() => {
-			if (isLineClamp.value) {
-				if (expanded.value) return {
-					overflow: "visible",
-					textOverflow: "clip",
-					display: "block",
-					whiteSpace: "normal",
-					WebkitLineClamp: "unset",
-					WebkitBoxOrient: "vertical"
-				};
-				return {
-					overflow: "hidden",
-					textOverflow: "ellipsis",
-					display: "-webkit-box",
-					whiteSpace: "normal",
-					WebkitLineClamp: String(props.lineClamp),
-					WebkitBoxOrient: "vertical"
-				};
-			}
-			if (expanded.value) return {
+			if (isLineClamp.value) return expanded.value ? {
 				overflow: "visible",
 				textOverflow: "clip",
-				whiteSpace: "normal"
+				display: "block",
+				whiteSpace: "normal",
+				WebkitLineClamp: "unset",
+				WebkitBoxOrient: "vertical"
+			} : {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				display: "-webkit-box",
+				whiteSpace: "normal",
+				WebkitLineClamp: String(maxLines.value),
+				WebkitBoxOrient: "vertical"
 			};
-			return {
+			return expanded.value ? {
+				overflow: "visible",
+				textOverflow: "clip",
+				whiteSpace: "normal"
+			} : {
 				overflow: "hidden",
 				textOverflow: "ellipsis",
 				whiteSpace: "nowrap"
 			};
 		});
-		const nativeTitle = computed(() => {
-			if ((!enableTooltip.value || Boolean(tooltipConfig.value.disabled)) && isEllipsis.value) return text.value;
-		});
+		const measurementStyle = computed(() => ({
+			position: "fixed",
+			top: 0,
+			left: 0,
+			zIndex: -1,
+			boxSizing: "border-box",
+			width: `${measurementWidth.value}px`,
+			padding: measurementPadding.value,
+			margin: 0,
+			visibility: "hidden",
+			pointerEvents: "none",
+			whiteSpace: "normal"
+		}));
+		const nativeTitle = computed(() => !expanded.value && (!enableTooltip.value || tooltipConfig.value.disabled) && isEllipsis.value ? text.value : void 0);
 		const buttonRole = computed(() => isExpandable.value ? "button" : void 0);
 		const buttonTabIndex = computed(() => isExpandable.value ? 0 : void 0);
 		const ariaExpanded = computed(() => props.expandTrigger === "click" ? String(expanded.value) : void 0);
-		const syncText = () => {
-			var _triggerRef$value$tex, _triggerRef$value;
-			const nextText = (_triggerRef$value$tex = (_triggerRef$value = triggerRef.value) === null || _triggerRef$value === void 0 || (_triggerRef$value = _triggerRef$value.textContent) === null || _triggerRef$value === void 0 ? void 0 : _triggerRef$value.trim()) !== null && _triggerRef$value$tex !== void 0 ? _triggerRef$value$tex : "";
-			if (nextText !== text.value) text.value = nextText;
-		};
-		const calculateEllipsis = () => {
-			syncText();
+		function syncMeasurement() {
+			var _clone$querySelector, _clone$textContent$tr, _clone$textContent;
 			const triggerElement = triggerRef.value;
-			if (!triggerElement || expanded.value) return;
-			let nextEllipsis = false;
-			if (isLineClamp.value) nextEllipsis = triggerElement.scrollHeight > triggerElement.offsetHeight + 1 || triggerElement.scrollWidth > triggerElement.clientWidth + 1;
-			else {
-				var _contentRef$value$scr, _contentRef$value, _contentRef$value$off, _contentRef$value2;
-				nextEllipsis = Math.max((_contentRef$value$scr = (_contentRef$value = contentRef.value) === null || _contentRef$value === void 0 ? void 0 : _contentRef$value.scrollWidth) !== null && _contentRef$value$scr !== void 0 ? _contentRef$value$scr : 0, (_contentRef$value$off = (_contentRef$value2 = contentRef.value) === null || _contentRef$value2 === void 0 ? void 0 : _contentRef$value2.offsetWidth) !== null && _contentRef$value$off !== void 0 ? _contentRef$value$off : 0) > triggerElement.clientWidth + 1 || triggerElement.scrollWidth > triggerElement.clientWidth + 1;
+			if (!triggerElement) return;
+			const clone = triggerElement.cloneNode(true);
+			(_clone$querySelector = clone.querySelector("[data-ellipsis-measure]")) === null || _clone$querySelector === void 0 || _clone$querySelector.remove();
+			const nextHtml = clone.innerHTML;
+			const nextText = (_clone$textContent$tr = (_clone$textContent = clone.textContent) === null || _clone$textContent === void 0 ? void 0 : _clone$textContent.trim()) !== null && _clone$textContent$tr !== void 0 ? _clone$textContent$tr : "";
+			const computedStyle = window.getComputedStyle(triggerElement);
+			const nextPadding = `${computedStyle.paddingTop} ${computedStyle.paddingRight} ${computedStyle.paddingBottom} ${computedStyle.paddingLeft}`;
+			if (nextHtml !== measurementHtml.value) measurementHtml.value = nextHtml;
+			if (nextText !== text.value) text.value = nextText;
+			if (triggerElement.clientWidth !== measurementWidth.value) measurementWidth.value = triggerElement.clientWidth;
+			if (nextPadding !== measurementPadding.value) measurementPadding.value = nextPadding;
+		}
+		function handleClampChange(clamped) {
+			isEllipsis.value = clamped;
+		}
+		function handleClick() {
+			if (props.expandTrigger === "click" && (isEllipsis.value || expanded.value)) expanded.value = !expanded.value;
+		}
+		function handleKeydown(event) {
+			if (isExpandable.value && (event.key === "Enter" || event.key === " ")) {
+				event.preventDefault();
+				handleClick();
 			}
-			if (nextEllipsis !== isEllipsis.value) isEllipsis.value = nextEllipsis;
-		};
-		const handleResize = () => {
-			calculateEllipsis();
-		};
-		const handleClick = function() {
-			var _ref = _asyncToGenerator(function* () {
-				if (props.expandTrigger !== "click") return;
-				if (!expanded.value) calculateEllipsis();
-				if (!isEllipsis.value && !expanded.value) return;
-				expanded.value = !expanded.value;
-				yield nextTick();
-				if (!expanded.value) calculateEllipsis();
-			});
-			return function handleClick() {
-				return _ref.apply(this, arguments);
-			};
-		}();
-		const handleKeydown = function() {
-			var _ref2 = _asyncToGenerator(function* (ev) {
-				if (!isExpandable.value) return;
-				if (ev.key === "Enter" || ev.key === " ") {
-					ev.preventDefault();
-					yield handleClick();
-				}
-			});
-			return function handleKeydown(_x) {
-				return _ref2.apply(this, arguments);
-			};
-		}();
-		onMounted(() => {
-			nextTick(() => calculateEllipsis());
-		});
-		onUpdated(() => {
-			nextTick(() => calculateEllipsis());
-		});
+		}
 		watch(() => props.lineClamp, () => {
-			if (expanded.value) expanded.value = false;
-			nextTick(() => calculateEllipsis());
+			expanded.value = false;
+			nextTick(syncMeasurement);
+		});
+		onMounted(() => void nextTick(syncMeasurement));
+		onUpdated(() => void nextTick(syncMeasurement));
+		__expose({
+			triggerRef,
+			get triggerElement() {
+				return triggerRef.value;
+			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(resize_observer_v2_default), { onResize: handleResize }, {
+			return openBlock(), createBlock(unref(resize_observer_v2_default), { onResize: syncMeasurement }, {
 				default: withCtx(() => [enableTooltip.value ? (openBlock(), createBlock(unref(Tooltip), mergeProps({ key: 0 }, tooltipBindings.value, { disabled: tooltipDisabled.value }), {
 					content: withCtx(() => [renderSlot(_ctx.$slots, "tooltip", {}, () => [renderSlot(_ctx.$slots, "default")])]),
 					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(componentTag.value), mergeProps({
 						ref_key: "triggerRef",
-						ref: triggerRef
+						ref: triggerRef,
+						"data-part": "root"
 					}, _ctx.$attrs, {
 						class: rootCls.value,
 						style: rootStyle.value,
@@ -187,10 +163,19 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					}), {
 						default: withCtx(() => [isLineClamp.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", {
 							key: 1,
-							ref_key: "contentRef",
-							ref: contentRef,
 							class: normalizeClass(`${unref(prefixCls)}-content`)
-						}, [renderSlot(_ctx.$slots, "default")], 2))]),
+						}, [renderSlot(_ctx.$slots, "default")], 2)), createVNode(unref(RichLineClamp), {
+							"data-ellipsis-measure": "",
+							"aria-hidden": "true",
+							html: measurementHtml.value,
+							"max-lines": maxLines.value,
+							style: normalizeStyle(measurementStyle.value),
+							onClampchange: handleClampChange
+						}, null, 8, [
+							"html",
+							"max-lines",
+							"style"
+						])]),
 						_: 3
 					}, 16, [
 						"class",
@@ -204,7 +189,8 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				}, 16, ["disabled"])) : (openBlock(), createBlock(resolveDynamicComponent(componentTag.value), mergeProps({
 					key: 1,
 					ref_key: "triggerRef",
-					ref: triggerRef
+					ref: triggerRef,
+					"data-part": "root"
 				}, _ctx.$attrs, {
 					class: rootCls.value,
 					style: rootStyle.value,
@@ -217,10 +203,19 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				}), {
 					default: withCtx(() => [isLineClamp.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", {
 						key: 1,
-						ref_key: "contentRef",
-						ref: contentRef,
 						class: normalizeClass(`${unref(prefixCls)}-content`)
-					}, [renderSlot(_ctx.$slots, "default")], 2))]),
+					}, [renderSlot(_ctx.$slots, "default")], 2)), createVNode(unref(RichLineClamp), {
+						"data-ellipsis-measure": "",
+						"aria-hidden": "true",
+						html: measurementHtml.value,
+						"max-lines": maxLines.value,
+						style: normalizeStyle(measurementStyle.value),
+						onClampchange: handleClampChange
+					}, null, 8, [
+						"html",
+						"max-lines",
+						"style"
+					])]),
 					_: 3
 				}, 16, [
 					"class",

package/es/ellipsis/index.d.ts

@@ -18,7 +18,10 @@ declare const Ellipsis: {
             type: import("vue").PropType<boolean | EllipsisTooltipProps>;
             default: boolean;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+    }>> & Readonly<{}>, {
+        triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+        readonly triggerElement: HTMLElement | undefined;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         tooltip: boolean | EllipsisTooltipProps;
         lineClamp: string | number;
         expandTrigger: "click";
@@ -42,7 +45,10 @@ declare const Ellipsis: {
             type: import("vue").PropType<boolean | EllipsisTooltipProps>;
             default: boolean;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, {
+    }>> & Readonly<{}>, {
+        triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+        readonly triggerElement: HTMLElement | undefined;
+    }, {}, {}, {}, {
         tooltip: boolean | EllipsisTooltipProps;
         lineClamp: string | number;
         expandTrigger: "click";
@@ -63,23 +69,17 @@ declare const Ellipsis: {
         type: import("vue").PropType<boolean | EllipsisTooltipProps>;
         default: boolean;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+}>> & Readonly<{}>, {
+    triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    readonly triggerElement: HTMLElement | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     tooltip: boolean | EllipsisTooltipProps;
     lineClamp: string | number;
     expandTrigger: "click";
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
-        default?: (props: {}) => any;
-    } & {
-        default?: (props: {}) => any;
-    } & {
-        tooltip?: (props: {}) => any;
-    } & {
-        default?: (props: {}) => any;
-    } & {
-        default?: (props: {}) => any;
-    } & {
-        default?: (props: {}) => any;
+        default?: () => import("vue").VNode[];
+        tooltip?: () => import("vue").VNode[];
     };
 }) & {
     install: (app: App, options?: SDOptions) => void;
@@ -152,8 +152,6 @@ export declare const PerformantEllipsis: {
         default?: (props: {}) => any;
     } & {
         default?: (props: {}) => any;
-    } & {
-        default?: (props: {}) => any;
     } & {
         tooltip?: (props: {}) => any;
     };

package/es/ellipsis/performant-ellipsis.vue.d.ts

@@ -1,14 +1,12 @@
 import type { PropType } from 'vue';
 import type { EllipsisTooltipProps } from './interface';
-declare var __VLS_12: {}, __VLS_14: {}, __VLS_24: {}, __VLS_27: {};
+declare var __VLS_12: {}, __VLS_22: {}, __VLS_25: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_12) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_22) => any;
 } & {
-    default?: (props: typeof __VLS_24) => any;
-} & {
-    tooltip?: (props: typeof __VLS_27) => any;
+    tooltip?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     lineClamp: {

package/es/ellipsis/performant-ellipsis.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/es
 import { getPrefixCls } from "../_utils/global-config.js";
 import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
 import ellipsis_default from "./ellipsis.js";
-import { computed, createBlock, createElementBlock, createSlots, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, ref, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+import { computed, createBlock, createSlots, defineComponent, mergeProps, nextTick, openBlock, renderSlot, resolveDynamicComponent, shallowRef, withCtx } from "vue";
 //#region components/ellipsis/performant-ellipsis.vue?vue&type=script&setup=true&lang.ts
 var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
 	name: "PerformantEllipsis",
@@ -10,27 +10,17 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 }), {}, {
 	__name: "performant-ellipsis",
 	props: {
-		/**
-		* @zh 最大显示行数。不传时为单行省略。
-		* @en Maximum number of displayed lines. Single-line ellipsis is used by default.
-		*/
+		/** @zh 最大显示行数。不传时为单行省略。 @en Maximum displayed lines. */
 		lineClamp: {
 			type: [Number, String],
 			default: void 0
 		},
-		/**
-		* @zh 展开的触发方式
-		* @en Trigger mode for expansion
-		* @values 'click'
-		*/
+		/** @zh 展开的触发方式 @en Trigger mode for expansion */
 		expandTrigger: {
 			type: String,
 			default: void 0
 		},
-		/**
-		* @zh 省略时是否展示提示。可传入 Tooltip 属性。
-		* @en Whether to show a tooltip when ellipsis is active. Tooltip props are supported.
-		*/
+		/** @zh 省略时是否展示提示。可传入 Tooltip 属性。 @en Whether to show a tooltip when ellipsis is active. */
 		tooltip: {
 			type: [Boolean, Object],
 			default: true
@@ -49,8 +39,8 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		* @slot tooltip
 		*/
 		const prefixCls = getPrefixCls("ellipsis");
-		const activated = ref(false);
-		const ellipsisRef = ref(null);
+		const activated = shallowRef(false);
+		const ellipsisRef = shallowRef();
 		const isLineClamp = computed(() => props.lineClamp !== void 0);
 		const componentTag = computed(() => isLineClamp.value ? "div" : "span");
 		const rootCls = computed(() => [prefixCls, {
@@ -74,9 +64,8 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 			};
 		});
 		const getActivatedTriggerElement = () => {
-			var _ellipsisInstance$tri;
-			const ellipsisInstance = ellipsisRef.value;
-			return (_ellipsisInstance$tri = ellipsisInstance === null || ellipsisInstance === void 0 ? void 0 : ellipsisInstance.triggerRef) !== null && _ellipsisInstance$tri !== void 0 ? _ellipsisInstance$tri : ellipsisInstance === null || ellipsisInstance === void 0 ? void 0 : ellipsisInstance.$el;
+			var _ellipsisRef$value;
+			return (_ellipsisRef$value = ellipsisRef.value) === null || _ellipsisRef$value === void 0 ? void 0 : _ellipsisRef$value.triggerElement;
 		};
 		const replayInteraction = (type) => {
 			const triggerElement = getActivatedTriggerElement();
@@ -87,7 +76,7 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				return;
 			}
 			if (type === "focus") {
-				triggerElement.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+				triggerElement.focus();
 				return;
 			}
 			triggerElement.dispatchEvent(new MouseEvent("click", { bubbles: true }));
@@ -97,6 +86,8 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				if (activated.value) return;
 				activated.value = true;
 				yield nextTick();
+				yield nextTick();
+				yield new Promise((resolve) => requestAnimationFrame(() => resolve()));
 				replayInteraction(interactionType);
 			});
 			return function activate(_x) {
@@ -120,10 +111,7 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				onFocus: handleFocus,
 				onClick: handleClick
 			}), {
-				default: withCtx(() => [isLineClamp.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", {
-					key: 1,
-					class: normalizeClass(`${unref(prefixCls)}-content`)
-				}, [renderSlot(_ctx.$slots, "default")], 2))]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 16, ["class", "style"])) : (openBlock(), createBlock(ellipsis_default, mergeProps({
 				key: 1,

package/es/ellipsis/style/index.css

@@ -23,7 +23,6 @@
 }
 .sd-ellipsis--single-line {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
 }
 .sd-ellipsis-content {
@@ -31,7 +30,6 @@
   max-width: none;
 }
 .sd-ellipsis--line-clamp {
-  display: -webkit-box;
   width: 100%;
   word-break: break-word;
 }

package/es/ellipsis/style/index.scss

@@ -9,8 +9,10 @@
 
   &--single-line {
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+
+    // 不要在共享类上设置 nowrap：RichLineClamp 的隐藏探针会继承该类，
+    // 探针永远只有一行时 clampchange 将无法报告溢出。单行行为由组件内联样式控制。
   }
 
   &-content {
@@ -19,7 +21,6 @@
   }
 
   &--line-clamp {
-    display: -webkit-box;
     width: 100%;
     word-break: break-word;
   }

package/es/file-previewer/file-previewer.vue_vue_type_script_setup_true_lang.js

@@ -5,8 +5,8 @@ import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import IconClose from "../icon/icon-close/index.js";
 import { useI18n } from "../locale/index.js";
 import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
-import IconLoading from "../icon/icon-loading/index.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
+import IconLoading from "../icon/icon-loading/index.js";
 import usePopupContainer from "../_hooks/use-popup-container.js";
 import usePopupOverflowHidden from "../_hooks/use-popup-overflow-hidden.js";
 import Image from "../image/index.js";

package/es/image/image.vue_vue_type_script_setup_true_lang.js

@@ -3,9 +3,9 @@ import { getPrefixCls } from "../_utils/global-config.js";
 import { isBoolean } from "../_utils/is.js";
 import { isServerRendering } from "../_utils/dom.js";
 import { useI18n } from "../locale/index.js";
+import { omit } from "../_utils/omit.js";
 import useMergeState from "../_hooks/use-merge-state.js";
 import IconLoading from "../icon/icon-loading/index.js";
-import { omit } from "../_utils/omit.js";
 import IconImageClose from "../icon/icon-image-close/index.js";
 import { PreviewGroupInjectionKey } from "./context.js";
 import useImageLoadStatus from "./hooks/use-image-load-status.js";

package/es/image/preview.vue_vue_type_script_setup_true_lang.js

@@ -5,9 +5,9 @@ import { throttleByRaf } from "../_utils/throttle-by-raf.js";
 import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import IconClose from "../icon/icon-close/index.js";
 import { useI18n } from "../locale/index.js";
+import usePopupManager from "../_hooks/use-popup-manager.js";
 import useMergeState from "../_hooks/use-merge-state.js";
 import IconLoading from "../icon/icon-loading/index.js";
-import usePopupManager from "../_hooks/use-popup-manager.js";
 import usePopupContainer from "../_hooks/use-popup-container.js";
 import usePopupOverflowHidden from "../_hooks/use-popup-overflow-hidden.js";
 import useImageLoadStatus from "./hooks/use-image-load-status.js";