@varlet/ui 3.16.0-alpha.1778310023051 → 3.16.0-alpha.1778498431663

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-alpha.1778310023051",
+  "version": "3.16.0-alpha.1778498431663",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -1586,6 +1586,24 @@
                 "type": "number",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "hoverable",
+              "description": "Whether to show a hover highlight overlay on desktop",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "surface",
+              "description": "Background preset, optional value is `low`, invalid when `variant` is `filled`. It currently only takes effect in the MD3 dark theme",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
             }
           ],
           "events": [
@@ -5954,6 +5972,24 @@
                 "type": "boolean",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "surface",
+              "description": "Background preset, optional value is `low`. It currently only takes effect in the MD3 dark theme",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "hoverable",
+              "description": "Whether to show a hover highlight overlay on desktop",
+              "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.16.0-alpha.1778310023051",
+  "version": "3.16.0-alpha.1778498431663",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -1637,6 +1637,24 @@
                 "type": "number",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "hoverable",
+              "description": "是否在桌面端悬停时显示一层高亮遮罩",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "surface",
+              "description": "背景色预设，可选值 `low`，在 `variant` 为 `filled` 时无效，目前只作用在 MD3 暗色主题",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
             }
           ],
           "events": [
@@ -5996,6 +6014,24 @@
                 "type": "boolean",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "surface",
+              "description": "背景色预设，可选值 `low`，目前只作用在 MD3 暗色主题",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "hoverable",
+              "description": "是否在桌面端悬停时显示一层高亮遮罩",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
             }
           ],
           "events": [

package/lib/varlet.cjs.js

@@ -9378,6 +9378,8 @@ var props$13 = {
 		type: String,
 		default: "column"
 	},
+	surface: String,
+	hoverable: Boolean,
 	floating: Boolean,
 	floatingDuration: {
 		type: Number,
@@ -9426,12 +9428,14 @@ var { name: name$63, n: n$71, classes: classes$55 } = createNamespace("card");
 var RIPPLE_DELAY = 500;
 var _hoisted_1$29 = ["src", "alt"];
 function __render__$69(_ctx, _cache) {
+	const _component_var_hover_overlay = (0, vue.resolveComponent)("var-hover-overlay");
 	const _component_var_icon = (0, vue.resolveComponent)("var-icon");
 	const _component_var_button = (0, vue.resolveComponent)("var-button");
 	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", {
 		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.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.hoverable, _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", {
@@ -9491,6 +9495,7 @@ 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"]),
 		_ctx.showFloatingButtons ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 			key: 0,
 			class: (0, vue.normalizeClass)(_ctx.classes(_ctx.n("floating-buttons"), _ctx.n("$--box"))),
@@ -9517,14 +9522,22 @@ 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.ripple || _ctx.floater }], [
+		_directive_hover,
+		_ctx.handleHovering,
+		"desktop"
+	]]);
 }
 var __sfc__$69 = (0, vue.defineComponent)({
 	name: name$63,
-	directives: { Ripple: stdin_default$70 },
+	directives: {
+		Ripple: stdin_default$70,
+		Hover: stdin_default$39
+	},
 	components: {
 		VarIcon: stdin_default$41,
-		VarButton: stdin_default$12
+		VarButton: stdin_default$12,
+		VarHoverOverlay: stdin_default$40
 	},
 	props: props$13,
 	setup(props2) {
@@ -9541,6 +9554,8 @@ var __sfc__$69 = (0, vue.defineComponent)({
 		const contentHeight = (0, vue.ref)("0px");
 		const opacity = (0, vue.ref)("0");
 		const isRow = (0, vue.computed)(() => props2.layout === "row");
+		const surfaceLow = (0, vue.computed)(() => props2.surface === "low" && props2.variant !== "filled");
+		const { hovering, handleHovering } = useHoverOverlay();
 		const showFloatingButtons = (0, vue.ref)(false);
 		const floated = (0, vue.ref)(false);
 		const { zIndex } = useZIndex(() => props2.floating, 1);
@@ -9548,11 +9563,15 @@ var __sfc__$69 = (0, vue.defineComponent)({
 		let dropdownFloaterLeft = "auto";
 		let dropper = null;
 		const floater = (0, vue.ref)(null);
+		let hasEnteredFloating = false;
 		useLock(() => props2.floating, () => !isRow.value);
 		(0, vue.watch)(() => props2.floating, (value) => {
 			if (isRow.value) return;
 			(0, vue.nextTick)(() => {
-				value ? floating() : dropdown();
+				if (value) {
+					hasEnteredFloating = true;
+					floating();
+				} else if (hasEnteredFloating) dropdown();
 			});
 		}, { immediate: true });
 		function floating() {
@@ -9629,6 +9648,9 @@ var __sfc__$69 = (0, vue.defineComponent)({
 			opacity,
 			zIndex,
 			isRow,
+			surfaceLow,
+			hovering,
+			handleHovering,
 			showFloatingButtons,
 			floated,
 			n: n$71,
@@ -19153,28 +19175,42 @@ var props$53 = {
 	height: [Number, String],
 	round: Boolean,
 	inline: Boolean,
+	surface: String,
+	hoverable: Boolean,
 	onClick: defineListenerProp()
 };
 //#endregion
 //#region es/paper/Paper.mjs
 var { name: name$26, n: n$30, classes: classes$24 } = createNamespace("paper");
 function __render__$33(_ctx, _cache) {
+	const _component_var_hover_overlay = (0, vue.resolveComponent)("var-hover-overlay");
 	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.n("--cursor")], [_ctx.round, _ctx.n("--round")], [_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.hoverable, _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")], 6)), [[_directive_ripple, { disabled: !_ctx.ripple }]]);
+	}, [(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 }], [
+		_directive_hover,
+		_ctx.handleHovering,
+		"desktop"
+	]]);
 }
 var __sfc__$33 = (0, vue.defineComponent)({
 	name: name$26,
-	directives: { Ripple: stdin_default$70 },
+	directives: {
+		Ripple: stdin_default$70,
+		Hover: stdin_default$39
+	},
+	components: { VarHoverOverlay: stdin_default$40 },
 	props: props$53,
 	setup(props2) {
+		const surfaceLow = (0, vue.computed)(() => props2.surface === "low");
+		const { hovering, handleHovering } = useHoverOverlay();
 		function handleClick(e) {
 			call(props2.onClick, e);
 		}
@@ -19182,6 +19218,9 @@ var __sfc__$33 = (0, vue.defineComponent)({
 			n: n$30,
 			classes: classes$24,
 			formatElevation,
+			surfaceLow,
+			hovering,
+			handleHovering,
 			toSizeUnit,
 			handleClick
 		};
@@ -25382,6 +25421,7 @@ var stdin_default$229 = {
 var stdin_default$228 = {
 	"--card-border-radius": "12px",
 	"--card-background": "var(--color-surface-container-highest)",
+	"--card-surface-low-background": "#1c1b1d",
 	"--card-filled-background": "var(--color-surface-container-highest)",
 	"--card-image-height": "188px",
 	"--card-title-color": "var(--color-inverse-surface)",
@@ -25870,6 +25910,7 @@ var stdin_default$198 = {
 //#region es/themes/md3-dark/paper.mjs
 var stdin_default$197 = {
 	"--paper-background": "var(--color-surface-container-highest)",
+	"--paper-surface-low-background": "#1c1b1d",
 	"--paper-border-radius": "12px"
 };
 //#endregion
@@ -26576,6 +26617,7 @@ var stdin_default$161 = {
 var stdin_default$160 = {
 	"--card-border-radius": "12px",
 	"--card-background": "var(--color-surface-container-low)",
+	"--card-surface-low-background": "var(--color-surface-container-low)",
 	"--card-filled-background": "var(--color-surface-container-highest)",
 	"--card-image-height": "188px",
 	"--card-title-color": "#1D1B20",
@@ -27064,6 +27106,7 @@ var stdin_default$130 = {
 //#region es/themes/md3-light/paper.mjs
 var stdin_default$129 = {
 	"--paper-background": "var(--color-surface-container-low)",
+	"--paper-surface-low-background": "var(--color-surface-container-low)",
 	"--paper-border-radius": "12px"
 };
 //#endregion
@@ -28997,7 +29040,7 @@ var _WatermarkComponent = stdin_default$100;
 var stdin_default$94 = stdin_default$100;
 //#endregion
 //#region es/index.bundle.mjs
-var version = "3.16.0-alpha.1778310023051";
+var version = "3.16.0-alpha.1778498431663";
 function install(app) {
 	stdin_default.install && app.use(stdin_default);
 	stdin_default$1.install && app.use(stdin_default$1);