@varlet/ui 3.20.6 → 3.20.7

package/highlight/web-types.en-US.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.20.6",
+  "version": "3.20.7",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -4125,6 +4125,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "expandable-on-overflow",
+              "description": "Allow expansion only if the text is overflowed",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "line-clamp",
               "description": "Maximum number of display lines, see [line-clamp](https://caniuse.com/?search=line-clamp) for compatibility",
@@ -4134,6 +4143,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "tooltip-on-overflow",
+              "description": "Show the tooltip only when the text is truncated",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "tooltip",
               "description": "Tooltip component props, for deep customization. For more convenience, `sameWidth` defaults to `true` here",

package/highlight/web-types.zh-CN.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.20.6",
+  "version": "3.20.7",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -3876,6 +3876,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "expandable-on-overflow",
+              "description": "仅在文本被省略时允许展开",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "line-clamp",
               "description": "最大显示行数，兼容性见 [line-clamp](https://caniuse.com/?search=line-clamp)",
@@ -3885,6 +3894,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "tooltip-on-overflow",
+              "description": "仅在文本被省略时显示 Tooltip",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "tooltip",
               "description": "Tooltip 组件配置，用于深度定制。为了更方便使用，`sameWidth` 在这里默认为 `true`",

package/lib/varlet.cjs.js

@@ -18413,7 +18413,9 @@ var stdin_default$99 = stdin_default$397;
 var props$32 = {
 	expand: Boolean,
 	expandTrigger: String,
+	expandableOnOverflow: Boolean,
 	lineClamp: [Number, String],
+	tooltipOnOverflow: Boolean,
 	tooltip: {
 		type: [Object, Boolean],
 		default: true
@@ -18444,11 +18446,12 @@ var _hoisted_1$26 = { key: 0 };
 function __render__$53(_ctx, _cache) {
 	const _component_var_tooltip = (0, vue.resolveComponent)("var-tooltip");
 	return (0, vue.openBlock)(), (0, vue.createBlock)(_component_var_tooltip, (0, vue.mergeProps)({
+		ref: "rootRef",
 		class: _ctx.classes(_ctx.n(), [
 			_ctx.lineClamp,
 			_ctx.n("--clamp"),
 			_ctx.n("--line")
-		], [_ctx.expandTrigger, _ctx.n("--cursor")], [_ctx.expanding, _ctx.n("--expand")]),
+		], [_ctx.clickable, _ctx.n("--cursor")], [_ctx.expanding, _ctx.n("--expand")]),
 		"var-ellipsis-cover": "",
 		style: _ctx.rootStyles
 	}, _ctx.tooltipProps, { onClick: _ctx.handleClick }), {
@@ -18469,24 +18472,54 @@ var __sfc__$53 = (0, vue.defineComponent)({
 	components: { VarTooltip: stdin_default$99 },
 	props: props$32,
 	setup(props2) {
+		const rootRef = (0, vue.ref)(null);
+		const truncated = (0, vue.ref)(false);
 		const expanding = useVModel(props2, "expand");
+		let previousWidth;
+		const clickable = (0, vue.computed)(() => !!props2.expandTrigger && (!props2.expandableOnOverflow || truncated.value || expanding.value));
 		const rootStyles = (0, vue.computed)(() => props2.lineClamp ? { "-webkit-line-clamp": props2.lineClamp } : {});
 		const tooltipProps = (0, vue.computed)(() => {
-			if (props2.tooltip === false) return { disabled: true };
+			if (props2.tooltip === false || props2.tooltipOnOverflow && !truncated.value) return { disabled: true };
 			if (props2.tooltip === true) return { sameWidth: true };
 			return __spreadValues$13({ sameWidth: true }, props2.tooltip);
 		});
+		function getRootElement() {
+			var _a;
+			if (!rootRef.value) return null;
+			return (_a = rootRef.value.$el) != null ? _a : rootRef.value;
+		}
+		function checkTruncated() {
+			const element = getRootElement();
+			if (!element) return;
+			const next = props2.lineClamp ? element.scrollHeight > element.clientHeight : element.scrollWidth > element.clientWidth;
+			if (next !== truncated.value) truncated.value = next;
+		}
 		function handleClick() {
-			if (!props2.expandTrigger) return;
+			if (!clickable.value) return;
 			expanding.value = !expanding.value;
 		}
+		function handleResize(entries) {
+			var _a;
+			const width = (_a = entries[0]) == null ? void 0 : _a.contentRect.width;
+			if (width !== void 0 && width !== previousWidth && previousWidth !== void 0 && props2.expandableOnOverflow && expanding.value) expanding.value = false;
+			previousWidth = width;
+			checkTruncated();
+		}
+		useResizeObserver(getRootElement, handleResize);
+		(0, vue.watch)(() => props2.lineClamp, checkTruncated);
+		onSmartMounted(checkTruncated);
+		(0, vue.onUpdated)(checkTruncated);
 		return {
+			rootRef,
+			truncated,
+			clickable,
 			tooltipProps,
 			expanding,
 			rootStyles,
 			n: n$55,
 			classes: classes$44,
-			handleClick
+			handleClick,
+			handleResize
 		};
 	}
 });
@@ -32877,7 +32910,7 @@ var _WatermarkComponent = stdin_default$108;
 var stdin_default$102 = stdin_default$108;
 //#endregion
 //#region es/index.bundle.mjs
-var version = "3.20.6";
+var version = "3.20.7";
 function install(app) {
 	stdin_default.install && app.use(stdin_default);
 	stdin_default$1.install && app.use(stdin_default$1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.20.6",
+  "version": "3.20.7",
   "description": "A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.",
   "keywords": [
     "Vue3",
@@ -44,9 +44,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/use": "3.20.6",
-    "@varlet/icons": "3.20.6",
-    "@varlet/shared": "3.20.6"
+    "@varlet/shared": "3.20.7",
+    "@varlet/icons": "3.20.7",
+    "@varlet/use": "3.20.7"
   },
   "devDependencies": {
     "@types/node": "^20.19.0",
@@ -62,9 +62,9 @@
     "vue": "3.5.21",
     "vue-router": "4.5.1",
     "zod": "^3.23.8",
-    "@varlet/cli": "3.20.6",
-    "@varlet/ui": "3.20.6",
-    "@varlet/touch-emulator": "3.20.6"
+    "@varlet/ui": "3.20.7",
+    "@varlet/cli": "3.20.7",
+    "@varlet/touch-emulator": "3.20.7"
   },
   "peerDependencies": {
     "vue": "^3.2.0"

package/types/ellipsis.d.ts

@@ -8,7 +8,9 @@ export type EllipsisExpandTrigger = 'click'
 export interface EllipsisProps extends BasicAttributes {
   expand?: boolean
   expandTrigger?: EllipsisExpandTrigger
+  expandableOnOverflow?: boolean
   lineClamp?: string | number
+  tooltipOnOverflow?: boolean
   tooltip?: boolean | TooltipProps
   'onUpdate:expand'?: ListenerProp<(expand: boolean) => void>
 }