@varlet/ui 3.16.0 → 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.0",
+  "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"
               }
             },
@@ -5668,6 +5668,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "align",
+              "description": "Overall content alignment, options are `start` `center` `end`",
+              "default": "center",
+              "value": {
+                "type": "OtpInputAlign",
+                "kind": "expression"
+              }
+            },
             {
               "name": "validate-trigger",
               "description": "Validation triggers, options are `onInput` `onClick` `onPaste` `onComplete`",
@@ -5921,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"
               }
             },
@@ -5984,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.0",
+  "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"
               }
             },
@@ -5710,6 +5710,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "align",
+              "description": "组件整体内容对齐方式，可选值为 `start` `center` `end`",
+              "default": "center",
+              "value": {
+                "type": "OtpInputAlign",
+                "kind": "expression"
+              }
+            },
             {
               "name": "validate-trigger",
               "description": "触发校验的时机，可选值为 `onInput` `onClick` `onPaste` `onComplete`",
@@ -5963,10 +5972,10 @@
             },
             {
               "name": "ripple",
-              "description": "是否启用水波效果",
+              "description": "是否启用水波效果，支持对象形式 `{ disabled?: boolean, color?: string }`",
               "default": "false",
               "value": {
-                "type": "boolean",
+                "type": "boolean | object",
                 "kind": "expression"
               }
             },
@@ -6026,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,
@@ -18422,6 +18462,10 @@ var props$50 = __spreadProps$3(__spreadValues$9({
 		type: [String, Number],
 		default: 8
 	},
+	align: {
+		type: String,
+		default: "center"
+	},
 	validateTrigger: {
 		type: Array,
 		default: () => ["onInput", "onComplete"]
@@ -18458,7 +18502,7 @@ function __render__$35(_ctx, _cache) {
 	const _component_var_form_details = (0, vue.resolveComponent)("var-form-details");
 	return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 		ref: "rootEl",
-		class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+		class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--align-${_ctx.align}`))),
 		style: (0, vue.normalizeStyle)({
 			"--otp-input-gutter": _ctx.gutterStyle,
 			"--otp-input-cell-height": _ctx.cellHeightStyle,
@@ -18770,6 +18814,7 @@ var __sfc__$35 = (0, vue.defineComponent)({
 			cellMaxWidthStyle,
 			resolvedInputmode,
 			nativeInputType,
+			align: props2.align,
 			n: n$33,
 			classes: classes$26,
 			setInputRef,
@@ -19169,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
@@ -19187,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"
@@ -19211,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);
 		}
@@ -19219,6 +19298,8 @@ var __sfc__$33 = (0, vue.defineComponent)({
 			classes: classes$24,
 			formatElevation,
 			surfaceLow,
+			normalizedRipple,
+			normalizedHoverable,
 			hovering,
 			handleHovering,
 			toSizeUnit,
@@ -29037,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.0";
+var version = "3.16.2";
 function install(app) {
 	stdin_default.install && app.use(stdin_default);
 	stdin_default$1.install && app.use(stdin_default$1);