@varlet/ui 3.16.1 → 3.16.2

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.16.1",
+  "version": "3.16.2",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -1562,10 +1562,10 @@
             },
             {
               "name": "ripple",
-              "description": "Whether to enable ripple",
+              "description": "Whether to enable ripple, supports object form `{ disabled?: boolean, color?: string }`",
               "default": "false",
               "value": {
-                "type": "boolean",
+                "type": "boolean | object",
                 "kind": "expression"
               }
             },
@@ -1589,10 +1589,10 @@
             },
             {
               "name": "hoverable",
-              "description": "Whether to enable hover effect",
+              "description": "Whether to enable hover effect, supports object form `{ disabled?: boolean, color?: string }`",
               "default": "false",
               "value": {
-                "type": "boolean",
+                "type": "boolean | object",
                 "kind": "expression"
               }
             },
@@ -5930,10 +5930,10 @@
             },
             {
               "name": "ripple",
-              "description": "Whether to enable ripple effect",
+              "description": "Whether to enable ripple effect, supports object form `{ disabled?: boolean, color?: string }`",
               "default": "false",
               "value": {
-                "type": "boolean",
+                "type": "boolean | object",
                 "kind": "expression"
               }
             },
@@ -5993,10 +5993,10 @@
             },
             {
               "name": "hoverable",
-              "description": "Whether to enable hover effect",
+              "description": "Whether to enable hover effect, supports object form `{ disabled?: boolean, color?: string }`",
               "default": "false",
               "value": {
-                "type": "boolean",
+                "type": "boolean | object",
                 "kind": "expression"
               }
             }

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.16.1",
+  "version": "3.16.2",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -1613,10 +1613,10 @@
             },
             {
               "name": "ripple",
-              "description": "是否开启水波",
+              "description": "是否开启水波，支持对象形式 `{ disabled?: boolean, color?: string }`",
               "default": "false",
               "value": {
-                "type": "boolean",
+                "type": "boolean | object",
                 "kind": "expression"
               }
             },
@@ -1640,10 +1640,10 @@
             },
             {
               "name": "hoverable",
-              "description": "是否开启鼠标悬停效果",
+              "description": "是否开启鼠标悬停效果，支持对象形式 `{ disabled?: boolean, color?: string }`",
               "default": "false",
               "value": {
-                "type": "boolean",
+                "type": "boolean | object",
                 "kind": "expression"
               }
             },
@@ -5972,10 +5972,10 @@
             },
             {
               "name": "ripple",
-              "description": "是否启用水波效果",
+              "description": "是否启用水波效果，支持对象形式 `{ disabled?: boolean, color?: string }`",
               "default": "false",
               "value": {
-                "type": "boolean",
+                "type": "boolean | object",
                 "kind": "expression"
               }
             },
@@ -6035,10 +6035,10 @@
             },
             {
               "name": "hoverable",
-              "description": "是否开启鼠标悬停效果",
+              "description": "是否开启鼠标悬停效果，支持对象形式 `{ disabled?: boolean, color?: string }`",
               "default": "false",
               "value": {
-                "type": "boolean",
+                "type": "boolean | object",
                 "kind": "expression"
               }
             }

package/lib/varlet.cjs.js

@@ -3250,13 +3250,17 @@ var stdin_default$39 = Hover;
 //#region es/hover-overlay/props.mjs
 var props$35 = {
 	hovering: Boolean,
-	focusing: Boolean
+	focusing: Boolean,
+	color: String
 };
 //#endregion
 //#region es/hover-overlay/HoverOverlay.mjs
 var { name: name$89, n: n$97, classes: classes$77 } = createNamespace("hover-overlay");
 function __render__$95(_ctx, _cache) {
-	return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing && !_ctx.inMobile(), _ctx.n("--focusing")])) }, null, 2);
+	return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+		class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing && !_ctx.inMobile(), _ctx.n("--focusing")])),
+		style: (0, vue.normalizeStyle)({ color: _ctx.color })
+	}, null, 6);
 }
 var __sfc__$95 = (0, vue.defineComponent)({
 	name: name$89,
@@ -9379,7 +9383,10 @@ var props$13 = {
 		default: "column"
 	},
 	surface: String,
-	hoverable: Boolean,
+	hoverable: {
+		type: [Boolean, Object],
+		default: false
+	},
 	floating: Boolean,
 	floatingDuration: {
 		type: Number,
@@ -9397,7 +9404,10 @@ var props$13 = {
 		],
 		default: true
 	},
-	ripple: Boolean,
+	ripple: {
+		type: [Boolean, Object],
+		default: false
+	},
 	onClick: defineListenerProp(),
 	"onUpdate:floating": defineListenerProp(),
 	outline: Boolean
@@ -9435,7 +9445,7 @@ function __render__$69(_ctx, _cache) {
 	const _directive_hover = (0, vue.resolveDirective)("hover");
 	return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 		ref: "card",
-		class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n("--layout-row")], [_ctx.variant === "outlined" || _ctx.outline, _ctx.n("--outline")], [_ctx.variant === "filled", _ctx.n("--filled")], [_ctx.surfaceLow, _ctx.n("--surface-low")], [_ctx.hoverable, _ctx.n("--cursor")], [_ctx.variant === "standard" || _ctx.outline, _ctx.formatElevation(_ctx.elevation, 1)])),
+		class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n("--layout-row")], [_ctx.variant === "outlined" || _ctx.outline, _ctx.n("--outline")], [_ctx.variant === "filled", _ctx.n("--filled")], [_ctx.surfaceLow, _ctx.n("--surface-low")], [!_ctx.normalizedHoverable.disabled, _ctx.n("--cursor")], [_ctx.variant === "standard" || _ctx.outline, _ctx.formatElevation(_ctx.elevation, 1)])),
 		style: (0, vue.normalizeStyle)({ zIndex: _ctx.floated ? _ctx.zIndex : void 0 }),
 		onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
 	}, [(0, vue.createElementVNode)("div", {
@@ -9495,7 +9505,10 @@ function __render__$69(_ctx, _cache) {
 				})
 			}, [(0, vue.renderSlot)(_ctx.$slots, "floating-content")], 6)) : (0, vue.createCommentVNode)("v-if", true)
 		], 2),
-		(0, vue.createVNode)(_component_var_hover_overlay, { hovering: _ctx.hoverable && !_ctx.floated ? _ctx.hovering : false }, null, 8, ["hovering"]),
+		(0, vue.createVNode)(_component_var_hover_overlay, {
+			hovering: !_ctx.normalizedHoverable.disabled && !_ctx.floated ? _ctx.hovering : false,
+			color: _ctx.normalizedHoverable.color
+		}, null, 8, ["hovering", "color"]),
 		_ctx.showFloatingButtons ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 			key: 0,
 			class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n("floating-buttons"), _ctx.n("$--box"))),
@@ -9522,7 +9535,10 @@ function __render__$69(_ctx, _cache) {
 			width: _ctx.holderWidth,
 			height: _ctx.holderHeight
 		})
-	}, null, 6)], 6)), [[_directive_ripple, { disabled: !_ctx.ripple || _ctx.floater }], [
+	}, null, 6)], 6)), [[_directive_ripple, {
+		disabled: _ctx.normalizedRipple.disabled || _ctx.floater,
+		color: _ctx.normalizedRipple.color
+	}], [
 		_directive_hover,
 		_ctx.handleHovering,
 		"desktop"
@@ -9559,6 +9575,8 @@ var __sfc__$69 = (0, vue.defineComponent)({
 		const showFloatingButtons = (0, vue.ref)(false);
 		const floated = (0, vue.ref)(false);
 		const { zIndex } = useZIndex(() => props2.floating, 1);
+		const normalizedRipple = (0, vue.computed)(() => normalizeRipple(props2.ripple));
+		const normalizedHoverable = (0, vue.computed)(() => normalizeHoverable(props2.hoverable));
 		let dropdownFloaterTop = "auto";
 		let dropdownFloaterLeft = "auto";
 		let dropper = null;
@@ -9599,7 +9617,27 @@ var __sfc__$69 = (0, vue.defineComponent)({
 				opacity.value = "1";
 				floaterOverflow.value = "auto";
 				floated.value = true;
-			}), props2.ripple ? RIPPLE_DELAY : 0);
+			}), normalizedRipple.value.disabled ? 0 : RIPPLE_DELAY);
+		}
+		function normalizeRipple(value) {
+			if (isPlainObject(value)) return {
+				disabled: !!value.disabled,
+				color: value.color
+			};
+			return {
+				disabled: !value,
+				color: void 0
+			};
+		}
+		function normalizeHoverable(value) {
+			if (isPlainObject(value)) return {
+				disabled: !!value.disabled,
+				color: value.color
+			};
+			return {
+				disabled: !value,
+				color: void 0
+			};
 		}
 		function dropdown() {
 			clearTimeout(dropper);
@@ -9649,6 +9687,8 @@ var __sfc__$69 = (0, vue.defineComponent)({
 			zIndex,
 			isRow,
 			surfaceLow,
+			normalizedRipple,
+			normalizedHoverable,
 			hovering,
 			handleHovering,
 			showFloatingButtons,
@@ -19174,14 +19214,20 @@ var props$53 = {
 		],
 		default: false
 	},
-	ripple: Boolean,
+	ripple: {
+		type: [Boolean, Object],
+		default: false
+	},
 	radius: [Number, String],
 	width: [Number, String],
 	height: [Number, String],
 	round: Boolean,
 	inline: Boolean,
 	surface: String,
-	hoverable: Boolean,
+	hoverable: {
+		type: [Boolean, Object],
+		default: false
+	},
 	onClick: defineListenerProp()
 };
 //#endregion
@@ -19192,14 +19238,20 @@ function __render__$33(_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.formatElevation(_ctx.elevation, 2), [_ctx.onClick || _ctx.hoverable, _ctx.n("--cursor")], [_ctx.round, _ctx.n("--round")], [_ctx.surfaceLow, _ctx.n("--surface-low")], [_ctx.inline, _ctx.n("$--inline-flex")])),
+		class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _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.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)
 		}),
 		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.hoverable ? _ctx.hovering : false }, null, 8, ["hovering"])], 6)), [[_directive_ripple, { disabled: !_ctx.ripple }], [
+	}, [(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,
+		color: _ctx.normalizedRipple.color
+	}], [
 		_directive_hover,
 		_ctx.handleHovering,
 		"desktop"
@@ -19216,6 +19268,28 @@ var __sfc__$33 = (0, vue.defineComponent)({
 	setup(props2) {
 		const surfaceLow = (0, vue.computed)(() => props2.surface === "low");
 		const { hovering, handleHovering } = useHoverOverlay();
+		const normalizedRipple = (0, vue.computed)(() => normalizeRipple(props2.ripple));
+		const normalizedHoverable = (0, vue.computed)(() => normalizeHoverable(props2.hoverable));
+		function normalizeRipple(value) {
+			if (isPlainObject(value)) return {
+				disabled: !!value.disabled,
+				color: value.color
+			};
+			return {
+				disabled: !value,
+				color: void 0
+			};
+		}
+		function normalizeHoverable(value) {
+			if (isPlainObject(value)) return {
+				disabled: !!value.disabled,
+				color: value.color
+			};
+			return {
+				disabled: !value,
+				color: void 0
+			};
+		}
 		function handleClick(e) {
 			call(props2.onClick, e);
 		}
@@ -19224,6 +19298,8 @@ var __sfc__$33 = (0, vue.defineComponent)({
 			classes: classes$24,
 			formatElevation,
 			surfaceLow,
+			normalizedRipple,
+			normalizedHoverable,
 			hovering,
 			handleHovering,
 			toSizeUnit,
@@ -29042,7 +29118,7 @@ var _WatermarkComponent = stdin_default$100;
 var stdin_default$94 = stdin_default$100;
 //#endregion
 //#region es/index.bundle.mjs
-var version = "3.16.1";
+var version = "3.16.2";
 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.16.1",
+  "version": "3.16.2",
   "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/shared": "3.16.1",
-    "@varlet/icons": "3.16.1",
-    "@varlet/use": "3.16.1"
+    "@varlet/icons": "3.16.2",
+    "@varlet/use": "3.16.2",
+    "@varlet/shared": "3.16.2"
   },
   "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.16.1",
-    "@varlet/ui": "3.16.1",
-    "@varlet/touch-emulator": "3.16.1"
+    "@varlet/ui": "3.16.2",
+    "@varlet/cli": "3.16.2",
+    "@varlet/touch-emulator": "3.16.2"
   },
   "peerDependencies": {
     "vue": "^3.2.0"

package/types/card.d.ts

@@ -11,10 +11,20 @@ export type CardVariant = 'standard' | 'outlined' | 'filled'
 
 export type CardSurface = 'low'
 
+export interface CardRipple {
+  disabled?: boolean
+  color?: string
+}
+
+export interface CardHoverable {
+  disabled?: boolean
+  color?: string
+}
+
 export interface CardProps extends BasicAttributes {
   variant?: CardVariant
   surface?: CardSurface
-  hoverable?: boolean
+  hoverable?: boolean | CardHoverable
   src?: string
   fit?: CardFit
   imageHeight?: string | number
@@ -24,7 +34,7 @@ export interface CardProps extends BasicAttributes {
   subtitle?: string
   description?: string
   elevation?: boolean | number | string
-  ripple?: boolean
+  ripple?: boolean | CardRipple
   layout?: CardLayout
   floating?: boolean
   floatingDuration?: number

package/types/hoverOverlay.d.ts

@@ -4,6 +4,8 @@ export declare const hoverOverlayProps: Record<keyof HoverOverlayProps, any>
 
 export interface HoverOverlayProps extends BasicAttributes {
   hovering?: boolean
+  focusing?: boolean
+  color?: string
 }
 
 export class HoverOverlay extends VarComponent {

package/types/paper.d.ts

@@ -5,16 +5,26 @@ export declare const paperProps: Record<keyof PaperProps, any>
 
 export type PaperSurface = 'low'
 
+export interface PaperRipple {
+  disabled?: boolean
+  color?: string
+}
+
+export interface PaperHoverable {
+  disabled?: boolean
+  color?: string
+}
+
 export interface PaperProps extends BasicAttributes {
   elevation?: boolean | number | string
-  ripple?: boolean
+  ripple?: boolean | PaperRipple
   radius?: string | number
   width?: string | number
   height?: string | number
   round?: boolean
   inline?: boolean
   surface?: PaperSurface
-  hoverable?: boolean
+  hoverable?: boolean | PaperHoverable
   onClick?: ListenerProp<(e: Event) => void>
 }