@varlet/ui 3.5.3 → 3.5.4

package/lib/varlet.cjs.js

@@ -8485,7 +8485,10 @@ const props$V = {
   },
   imageHeight: [String, Number],
   imageWidth: [String, Number],
-  outline: Boolean,
+  variant: {
+    type: String,
+    default: "standard"
+  },
   layout: {
     type: String,
     default: "column"
@@ -8505,7 +8508,9 @@ const props$V = {
   },
   ripple: Boolean,
   onClick: defineListenerProp(),
-  "onUpdate:floating": defineListenerProp()
+  "onUpdate:floating": defineListenerProp(),
+  // deprecated
+  outline: Boolean
 };
 var __async$d = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -8538,7 +8543,15 @@ function __render__$10(_ctx, _cache) {
     "div",
     {
       ref: "card",
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n("--layout-row")], [_ctx.outline, _ctx.n("--outline")], _ctx.formatElevation(_ctx.elevation, 1))),
+      class: 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)]
+        )
+      ),
       style: vue.normalizeStyle({
         zIndex: _ctx.floated ? _ctx.zIndex : void 0
       }),
@@ -24754,6 +24767,7 @@ var stdin_default$34 = {
   "--card-description-color": "#aaaaaa",
   "--card-padding": "0 0 15px 0",
   "--card-background": "var(--color-surface-container-highest)",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-outline-color": "var(--color-outline)",
   "--card-border-radius": "4px",
   "--card-image-width": "100%",
@@ -25838,6 +25852,7 @@ var stdin_default$1W = {
 var stdin_default$1V = {
   "--card-border-radius": "12px",
   "--card-background": "var(--color-surface-container-low)",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-image-height": "188px",
   "--card-title-color": "#1D1B20",
   "--card-title-font-size": "16px",
@@ -26813,6 +26828,7 @@ var stdin_default$W = {
 var stdin_default$V = {
   "--card-border-radius": "12px",
   "--card-background": "var(--color-surface-container-highest)",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-image-height": "188px",
   "--card-title-color": "var(--color-inverse-surface)",
   "--card-title-font-size": "16px",
@@ -29316,7 +29332,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.5.3";
+const version = "3.5.4";
 function install(app) {
   stdin_default$5I.install && app.use(stdin_default$5I);
   stdin_default$5G.install && app.use(stdin_default$5G);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.5.3",
-    "@varlet/shared": "3.5.3",
-    "@varlet/use": "3.5.3"
+    "@varlet/icons": "3.5.4",
+    "@varlet/shared": "3.5.4",
+    "@varlet/use": "3.5.4"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -65,9 +65,9 @@
     "typescript": "^5.1.5",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/cli": "3.5.3",
-    "@varlet/touch-emulator": "3.5.3",
-    "@varlet/ui": "3.5.3"
+    "@varlet/cli": "3.5.4",
+    "@varlet/ui": "3.5.4",
+    "@varlet/touch-emulator": "3.5.4"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/card.d.ts

@@ -7,7 +7,10 @@ export type CardFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
 
 export type CardLayout = 'row' | 'column'
 
+export type CardVariant = 'standard' | 'outlined' | 'filled'
+
 export interface CardProps extends BasicAttributes {
+  variant?: CardVariant
   src?: string
   fit?: CardFit
   imageHeight?: string | number
@@ -17,12 +20,18 @@ export interface CardProps extends BasicAttributes {
   subtitle?: string
   description?: string
   elevation?: boolean | number | string
+  filled?: boolean
   ripple?: boolean
-  onClick?: ListenerProp<(e: Event) => void>
   layout?: CardLayout
   floating?: boolean
   floatingDuration?: number
+  onClick?: ListenerProp<(e: Event) => void>
   'onUpdate:floating'?: ListenerProp<(value: boolean) => void>
+
+  /**
+   * @deprecated
+   */
+  outline?: boolean
 }
 
 export interface CardTitleData {

package/types/styleVars.d.ts

@@ -130,6 +130,7 @@ interface BaseStyleVars {
   '--button-normal-font-size'?: string
   '--button-large-font-size'?: string
   '--card-background'?: string
+  '--card-filled-background'?: string
   '--card-padding'?: string
   '--card-border-radius'?: string
   '--card-outline-color'?: string