@varlet/ui 3.20.5 → 3.20.6

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.6",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -6788,6 +6788,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.6",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -6530,6 +6530,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

@@ -21733,6 +21733,11 @@ var props$55 = {
 		type: [Boolean, Object],
 		default: false
 	},
+	active: {
+		type: [Boolean, Object],
+		default: false
+	},
+	disabled: Boolean,
 	onClick: defineListenerProp()
 };
 //#endregion
@@ -21743,18 +21748,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 +21788,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 +21809,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 +21830,7 @@ var __sfc__$39 = (0, vue.defineComponent)({
 			surfaceLow,
 			normalizedRipple,
 			normalizedHoverable,
+			normalizedActive,
 			hovering,
 			handleHovering,
 			toSizeUnit,
@@ -27700,7 +27726,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 +29108,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 +30475,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 +32877,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.6";
 function install(app) {
 	stdin_default.install && app.use(stdin_default);
 	stdin_default$1.install && app.use(stdin_default$1);