feat(card): support filled variant (#1786)

* feat(card): support filled variant * feat(card): optimize logic based on review comment * feat(card): unified class judgment method * feat(card): update doc * feat(card): modify css variable name
varletjs · Oct 1, 2024 · effd58f · effd58f
1 parent 8a5abfe
commit effd58f
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 1 deletion.
diff --git a/packages/varlet-ui/src/card/Card.vue b/packages/varlet-ui/src/card/Card.vue
@@ -1,7 +1,15 @@
 <template>
   <div
     ref="card"
-    :class="classes(n(), [isRow, n('--layout-row')], [outline, n('--outline')], formatElevation(elevation, 1))"
+    :class="
+      classes(
+        n(),
+        [isRow, n('--layout-row')],
+        [outline, n('--outline')],
+        [filled, n('--filled')],
+        [!filled, formatElevation(elevation, 1)]
+      )
+    "
     :style="{
       zIndex: floated ? zIndex : undefined,
     }"

diff --git a/packages/varlet-ui/src/card/__tests__/index.spec.js b/packages/varlet-ui/src/card/__tests__/index.spec.js
@@ -113,6 +113,23 @@ describe('test card component props', () => {
     wrapper.unmount()
   })
 
+  test('test card filled', async () => {
+    const wrapper = mount(VarCard, {
+      props: {
+        filled: true,
+      },
+    })
+
+    expect(wrapper.find('.var-card--filled').exists()).toBe(true)
+
+    await wrapper.setProps({
+      filled: false,
+    })
+    expect(wrapper.find('.var-card--filled').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
   test('test card src', async () => {
     const wrapper = mount(VarCard, {
       props: {

diff --git a/packages/varlet-ui/src/card/card.less b/packages/varlet-ui/src/card/card.less
@@ -1,6 +1,7 @@
 :root {
   --card-padding: 0 0 15px 0;
   --card-background: var(--color-surface-container-highest);
+  --card-filled-background: hsla(0, 0%, 93%, 1);
   --card-outline-color: var(--color-outline);
   --card-border-radius: 4px;
   --card-image-width: 100%;
@@ -184,4 +185,8 @@
   &--outline {
     border: thin solid var(--card-outline-color);
   }
+
+  &--filled &__floater {
+    background-color: var(--card-filled-background);
+  }
 }
diff --git a/packages/varlet-ui/src/card/docs/en-US.md b/packages/varlet-ui/src/card/docs/en-US.md
@@ -148,6 +148,19 @@ const floating = ref(false)
 </template>
 ```
 
+### Filled
+
+```html
+<template>
+  <var-card
+    filled
+    title="Dangerous"
+    subtitle="The girl was dangerous"
+    description="The way she came into the place I knew right then and there.There was something different about this girl.The way she moved her hair her face her lines.Divinity in motion as she stalked the room.I could feel the aura of her presence.Every head turned feeling passion and lust.The girl was persuasive the girl I could not trust.The girl was bad.The girl was dangerous."
+  />
+</template>
+```
+
 ## API
 
 ### Props
@@ -161,6 +174,7 @@ const floating = ref(false)
 | `src`               | The src of Image                                                | _string_ | `-`      |
 | `layout`            | Arrangement mode, options `row` `column`                        | _string_ | `column` |
 | `fit`               | Fill mode, options `fill` `contain` `cover` `none` `scale-down` | _string_ | `cover`  |
+| `filled`            | Whether to be filled card                                       | _boolean_ | `false`  |
 | `outline`           | Whether to be outline card                                      | _boolean_ | `false`  |
 | `alt`               | Image alt text, the same as the native attribute of the `img` tag                                                       | _string_ | `-`      |
 | `image-height`      | Height of Image                                                 | _string \| number_  | `-`     |
@@ -195,6 +209,7 @@ Here are the CSS variables used by the component. Styles can be customized using
 | Variable                            | Default               |
 |-------------------------------------|-----------------------|
 | `--card-background`                 | `var(--color-surface-container-highest)`                |
+| `--card-filled-background`          | `hsla(0, 0%, 93%, 1)` |
 | `--card-padding`                    | `0px 0 15px 0`        |
 | `--card-border-radius`              | `4px`                 |
 | `--card-outline-color`              | `var(--color-outline)` |

diff --git a/packages/varlet-ui/src/card/docs/zh-CN.md b/packages/varlet-ui/src/card/docs/zh-CN.md
@@ -148,6 +148,20 @@ const floating = ref(false)
 </template>
 ```
 
+
+### 填充
+
+```html
+<template>
+  <var-card
+    filled
+    title="本草纲目"
+    subtitle="我表情悠哉 跳个大概"
+    description="如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~"
+  />
+</template>
+```
+
 ## API
 
 ### 属性
@@ -162,6 +176,7 @@ const floating = ref(false)
 | `layout`            | 排列方式，可选值为 `row` `column`                               | _string_ | `column` |
 | `fit`               | 填充模式，可选值为 `fill` `contain` `cover` `none` `scale-down` | _string_ | `cover`  |
 | `outline`           | 是否使用外边框                                                | _boolean_ | `false`  |
+| `filled`            | 是否使用填充                                                | _boolean_ | `false`  |
 | `alt`               | 替代文本，和 img 标签原生属性一致                                                   | _string_ | `-`      |
 | `image-height`      | 图片高度                                                   | _string \| number_  | `-`     |
 | `image-width`       | 图片宽度                                                   | _string \| number_  | `-`     |
@@ -195,6 +210,7 @@ const floating = ref(false)
 | 变量名                                 | 默认值                  |
 |-------------------------------------|----------------------|
 | `--card-background`                 | `var(--color-surface-container-highest)`               |
+| `--card-filled-background`          | `hsla(0, 0%, 93%, 1)` |
 | `--card-padding`                    | `0px 0 15px 0`       |
 | `--card-border-radius`              | `4px`                |
 | `--card-outline-color`              | `var(--color-outline)` |

diff --git a/packages/varlet-ui/src/card/example/index.vue b/packages/varlet-ui/src/card/example/index.vue
@@ -60,6 +60,9 @@ onThemeChange()
 
   <app-type>{{ t('outline') }}</app-type>
   <var-card :title="t('title')" :subtitle="t('subtitle')" outline elevation="0" :description="t('description')" />
+
+  <app-type>{{ t('filled') }}</app-type>
+  <var-card :title="t('title')" :subtitle="t('subtitle')" filled :description="t('description')" />
 </template>
 
 <style scoped lang="less">

diff --git a/packages/varlet-ui/src/card/example/locale/en-US.ts b/packages/varlet-ui/src/card/example/locale/en-US.ts
@@ -3,6 +3,7 @@ export default {
   title: 'Dangerous',
   showSubtitle: 'Show Subtitle',
   outline: 'Outline',
+  filled: 'Filled',
   subtitle: 'The girl was dangerous',
   horizontal: 'Horizontal',
   description:

diff --git a/packages/varlet-ui/src/card/example/locale/zh-CN.ts b/packages/varlet-ui/src/card/example/locale/zh-CN.ts
@@ -3,6 +3,7 @@ export default {
   title: '本草纲目',
   showSubtitle: '显示副标题',
   outline: '外边框',
+  filled: '填充',
   subtitle: '我表情悠哉 跳个大概',
   horizontal: '横向显示',
   description:

diff --git a/packages/varlet-ui/src/card/props.ts b/packages/varlet-ui/src/card/props.ts
@@ -14,6 +14,7 @@ export const props = {
   imageHeight: [String, Number],
   imageWidth: [String, Number],
   outline: Boolean,
+  filled: Boolean,
   layout: {
     type: String as PropType<CardLayout>,
     default: 'column',

diff --git a/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/themes/__tests__/__snapshots__/index.spec.js.snap
@@ -136,6 +136,7 @@ exports[`test dark theme 1`] = `
   "--card-description-font-size": "14px",
   "--card-description-margin": "20px 0 0 0",
   "--card-description-padding": "0 13px",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-floating-buttons-bottom": "16px",
   "--card-floating-buttons-color": "#fff",
   "--card-floating-buttons-right": "16px",
@@ -982,6 +983,7 @@ exports[`test md3Dark theme 1`] = `
   "--card-description-font-size": "14px",
   "--card-description-margin": "32px 0 0 0",
   "--card-description-padding": "0 16px",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-floating-buttons-bottom": "16px",
   "--card-floating-buttons-color": "#fff",
   "--card-floating-buttons-right": "16px",
@@ -1812,6 +1814,7 @@ exports[`test md3Light theme 1`] = `
   "--card-description-font-size": "14px",
   "--card-description-margin": "32px 0 0 0",
   "--card-description-padding": "0 16px",
+  "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-floating-buttons-bottom": "16px",
   "--card-floating-buttons-color": "#fff",
   "--card-floating-buttons-right": "16px",

diff --git a/packages/varlet-ui/src/themes/dark/card.ts b/packages/varlet-ui/src/themes/dark/card.ts
@@ -4,6 +4,7 @@ export default {
   '--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%',

diff --git a/packages/varlet-ui/src/themes/md3-dark/card.ts b/packages/varlet-ui/src/themes/md3-dark/card.ts
@@ -1,6 +1,7 @@
 export default {
   '--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',

diff --git a/packages/varlet-ui/src/themes/md3-light/card.ts b/packages/varlet-ui/src/themes/md3-light/card.ts
@@ -1,6 +1,7 @@
 export default {
   '--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',

diff --git a/packages/varlet-ui/types/card.d.ts b/packages/varlet-ui/types/card.d.ts
@@ -17,6 +17,7 @@ export interface CardProps extends BasicAttributes {
   subtitle?: string
   description?: string
   elevation?: boolean | number | string
+  filled?: boolean
   ripple?: boolean
   onClick?: ListenerProp<(e: Event) => void>
   layout?: CardLayout