@varlet/ui 3.20.5 → 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.5",
+  "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",
@@ -6788,6 +6806,24 @@
                 "type": "boolean | object",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "active",
+              "description": "Whether to enable the persistent active effect. It uses a translucent primary-color overlay and text color by default and supports object form `{ color?: string }`",
+              "default": "false",
+              "value": {
+                "type": "boolean | object",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether to disable interaction. When disabled, click, hover, and ripple effects are disabled and only a disabled cursor is shown",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
             }
           ],
           "events": [

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.5",
+  "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`",
@@ -6530,6 +6548,24 @@
                 "type": "boolean | object",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "active",
+              "description": "是否开启常驻激活效果，默认使用主色半透明叠层和文字颜色，支持对象形式 `{ color?: string }`",
+              "default": "false",
+              "value": {
+                "type": "boolean | object",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "是否禁用交互。禁用后不触发点击、悬停和水波效果，仅显示禁用光标",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
             }
           ],
           "events": [

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
 		};
 	}
 });
@@ -21733,6 +21766,11 @@ var props$55 = {
 		type: [Boolean, Object],
 		default: false
 	},
+	active: {
+		type: [Boolean, Object],
+		default: false
+	},
+	disabled: Boolean,
 	onClick: defineListenerProp()
 };
 //#endregion
@@ -21743,18 +21781,26 @@ function __render__$39(_ctx, _cache) {
 	const _directive_ripple = (0, vue.resolveDirective)("ripple");
 	const _directive_hover = (0, vue.resolveDirective)("hover");
 	return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-		class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.variant === "standard", _ctx.formatElevation(_ctx.elevation, 2)], [_ctx.onClick || !_ctx.normalizedHoverable.disabled, _ctx.n("--cursor")], [_ctx.round, _ctx.n("--round")], [_ctx.surfaceLow, _ctx.n("--surface-low")], [_ctx.variant === "outlined", _ctx.n("--outlined")], [_ctx.variant === "filled", _ctx.n("--filled")], [_ctx.inline, _ctx.n("$--inline-flex")])),
+		class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.variant === "standard", _ctx.formatElevation(_ctx.elevation, 2)], [!_ctx.disabled && (_ctx.onClick || !_ctx.normalizedHoverable.disabled), _ctx.n("--cursor")], [_ctx.disabled, _ctx.n("--disabled")], [!_ctx.disabled && _ctx.normalizedActive.enabled, _ctx.n("--active")], [_ctx.round, _ctx.n("--round")], [_ctx.surfaceLow, _ctx.n("--surface-low")], [_ctx.variant === "outlined", _ctx.n("--outlined")], [_ctx.variant === "filled", _ctx.n("--filled")], [_ctx.inline, _ctx.n("$--inline-flex")])),
 		style: (0, vue.normalizeStyle)({
 			width: _ctx.toSizeUnit(_ctx.width),
 			height: _ctx.toSizeUnit(_ctx.height),
-			"border-radius": _ctx.toSizeUnit(_ctx.radius)
+			"border-radius": _ctx.toSizeUnit(_ctx.radius),
+			"--paper-active-color": _ctx.normalizedActive.color
 		}),
 		onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-	}, [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.createVNode)(_component_var_hover_overlay, {
-		hovering: !_ctx.normalizedHoverable.disabled ? _ctx.hovering : false,
-		color: _ctx.normalizedHoverable.color
-	}, null, 8, ["hovering", "color"])], 6)), [[_directive_ripple, {
-		disabled: _ctx.normalizedRipple.disabled,
+	}, [
+		(0, vue.renderSlot)(_ctx.$slots, "default"),
+		(0, vue.createVNode)(_component_var_hover_overlay, {
+			class: (0, vue.normalizeClass)(_ctx.n("active-overlay")),
+			hovering: !_ctx.disabled && _ctx.normalizedActive.enabled
+		}, null, 8, ["class", "hovering"]),
+		(0, vue.createVNode)(_component_var_hover_overlay, {
+			hovering: !_ctx.disabled && !_ctx.normalizedHoverable.disabled ? _ctx.hovering : false,
+			color: _ctx.normalizedHoverable.color
+		}, null, 8, ["hovering", "color"])
+	], 6)), [[_directive_ripple, {
+		disabled: _ctx.disabled || _ctx.normalizedRipple.disabled,
 		color: _ctx.normalizedRipple.color
 	}], [
 		_directive_hover,
@@ -21775,6 +21821,7 @@ var __sfc__$39 = (0, vue.defineComponent)({
 		const { hovering, handleHovering } = useHoverOverlay();
 		const normalizedRipple = (0, vue.computed)(() => normalizeRipple(props2.ripple));
 		const normalizedHoverable = (0, vue.computed)(() => normalizeHoverable(props2.hoverable));
+		const normalizedActive = (0, vue.computed)(() => normalizeActive(props2.active));
 		function normalizeRipple(value) {
 			if (isPlainObject(value)) return {
 				disabled: !!value.disabled,
@@ -21795,7 +21842,18 @@ var __sfc__$39 = (0, vue.defineComponent)({
 				color: void 0
 			};
 		}
+		function normalizeActive(value) {
+			if (isPlainObject(value)) return {
+				enabled: true,
+				color: value.color
+			};
+			return {
+				enabled: value,
+				color: void 0
+			};
+		}
 		function handleClick(e) {
+			if (props2.disabled) return;
 			call(props2.onClick, e);
 		}
 		return {
@@ -21805,6 +21863,7 @@ var __sfc__$39 = (0, vue.defineComponent)({
 			surfaceLow,
 			normalizedRipple,
 			normalizedHoverable,
+			normalizedActive,
 			hovering,
 			handleHovering,
 			toSizeUnit,
@@ -27700,7 +27759,9 @@ var stdin_default$297 = {
 	"--paper-outlined-background": "transparent",
 	"--paper-filled-background": "var(--color-surface-container-highest)",
 	"--paper-outline-color": "var(--color-outline)",
-	"--paper-border-radius": "4px"
+	"--paper-border-radius": "4px",
+	"--paper-active-color": "var(--color-primary)",
+	"--paper-active-opacity": "0.2"
 };
 //#endregion
 //#region es/themes/dark/picker.mjs
@@ -29080,7 +29141,9 @@ var stdin_default$221 = {
 	"--paper-outlined-background": "transparent",
 	"--paper-filled-background": "var(--color-surface-container-highest)",
 	"--paper-outline-color": "var(--color-outline)",
-	"--paper-border-radius": "12px"
+	"--paper-border-radius": "12px",
+	"--paper-active-color": "var(--color-primary)",
+	"--paper-active-opacity": "0.2"
 };
 //#endregion
 //#region es/themes/md3-dark/picker.mjs
@@ -30445,7 +30508,9 @@ var stdin_default$145 = {
 	"--paper-outlined-background": "transparent",
 	"--paper-filled-background": "var(--color-surface-container-highest)",
 	"--paper-outline-color": "var(--color-outline)",
-	"--paper-border-radius": "12px"
+	"--paper-border-radius": "12px",
+	"--paper-active-color": "var(--color-primary)",
+	"--paper-active-opacity": "0.2"
 };
 //#endregion
 //#region es/themes/md3-light/picker.mjs
@@ -32845,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.5";
+var version = "3.20.7";
 function install(app) {
 	stdin_default.install && app.use(stdin_default);
 	stdin_default$1.install && app.use(stdin_default$1);