feat(CellGroup): add inset prop (#8885)

* feat(CellGroup): add inset prop

* docs: hide inset grouped in weapp

src/cell-group/CellGroup.tsx

@@ -11,18 +11,25 @@ export default defineComponent({
 
   props: {
     title: String,
+    inset: Boolean,
     border: truthProp,
   },
 
   setup(props, { slots, attrs }) {
     const renderGroup = () => (
-      <div class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]} {...attrs}>
+      <div
+        class={[
+          bem({ inset: props.inset }),
+          { [BORDER_TOP_BOTTOM]: props.border && !props.inset },
+        ]}
+        {...attrs}
+      >
         {slots.default?.()}
       </div>
     );
 
     const renderTitle = () => (
-      <div class={bem('title')}>
+      <div class={bem('title', { inset: props.inset })}>
         {slots.title ? slots.title() : props.title}
       </div>
     );

src/cell-group/index.less

@@ -6,15 +6,28 @@
   --van-cell-group-title-padding: @cell-group-title-padding;
   --van-cell-group-title-font-size: @cell-group-title-font-size;
   --van-cell-group-title-line-height: @cell-group-title-line-height;
+  --van-cell-group-inset-padding: @cell-group-inset-padding;
+  --van-cell-group-inset-border-radius: @cell-group-inset-border-radius;
+  --van-cell-group-inset-title-padding: @cell-group-inset-title-padding;
 }
 
 .van-cell-group {
   background-color: var(--van-cell-group-background-color);
 
+  &--inset {
+    margin: var(--van-cell-group-inset-padding);
+    border-radius: var(--van-cell-group-inset-border-radius);
+    overflow: hidden;
+  }
+
   &__title {
     padding: var(--van-cell-group-title-padding);
     color: var(--van-cell-group-title-color);
     font-size: var(--van-cell-group-title-font-size);
     line-height: var(--van-cell-group-title-line-height);
+
+    &--inset {
+      padding: var(--van-cell-group-inset-title-padding);
+    }
   }
 }

src/cell-group/var.less

@@ -6,3 +6,7 @@
   var(--van-padding-xs);
 @cell-group-title-font-size: var(--van-font-size-md);
 @cell-group-title-line-height: 16px;
+@cell-group-inset-padding: 0 var(--van-padding-md);
+@cell-group-inset-border-radius: var(--van-border-radius-lg);
+@cell-group-inset-title-padding: var(--van-padding-md) var(--van-padding-md)
+  var(--van-padding-xs) var(--van-padding-xl);

src/cell/README.md

@@ -28,6 +28,15 @@ app.use(CellGroup);
 </van-cell-group>
 ```
 
+### Inset Grouped
+
+```html
+<van-cell-group inset>
+  <van-cell title="Cell title" value="Content" />
+  <van-cell title="Cell title" value="Content" label="Description" />
+</van-cell-group>
+```
+
 ### Size
 
 ```html
@@ -129,10 +138,11 @@ app.use(CellGroup);
 
 ### CellGroup Props
 
-| Attribute | Description                  | Type      | Default |
+| Attribute      | Description                  | Type      | Default |
-| --------- | ---------------------------- | --------- | ------- |
+| -------------- | ---------------------------- | --------- | ------- |
-| title     | Group title                  | _string_  | -       |
+| title          | Group title                  | _string_  | -       |
-| border    | Whether to show outer border | _boolean_ | `true`  |
+| inset `v3.1.0` | Whether to be inset grouped  | _boolean_ | `false` |
+| border         | Whether to show outer border | _boolean_ | `true`  |
 
 ### Cell Props
 
@@ -212,3 +222,6 @@ The component provides the following CSS variables, which can be used to customi
 | --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
 | --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
 | --van-cell-group-title-line-height | _16px_ | - |
+| --van-cell-group-inset-padding | _0 var(--van-padding-md)_ | - |
+| --van-cell-group-inset-border-radius | _var(--van-border-radius-lg)_ | - |
+| --van-cell-group-inset-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)_ | - |

src/cell/README.zh-CN.md

@@ -30,6 +30,17 @@ app.use(CellGroup);
 </van-cell-group>
 ```
 
+### 卡片风格
+
+通过 `CellGroup` 的 `inset` 属性，可以将单元格转换为圆角卡片风格。
+
+```html
+<van-cell-group inset>
+  <van-cell title="单元格" value="内容" />
+  <van-cell title="单元格" value="内容" label="描述信息" />
+</van-cell-group>
+```
+
 ### 单元格大小
 
 通过 `size` 属性可以控制单元格的大小。
@@ -132,10 +143,11 @@ app.use(CellGroup);
 
 ### CellGroup Props
 
-| 参数   | 说明           | 类型      | 默认值 |
+| 参数           | 说明                   | 类型      | 默认值  |
-| ------ | -------------- | --------- | ------ |
+| -------------- | ---------------------- | --------- | ------- |
-| title  | 分组标题       | _string_  | `-`    |
+| title          | 分组标题               | _string_  | `-`     |
-| border | 是否显示外边框 | _boolean_ | `true` |
+| inset `v3.1.0` | 是否展示为圆角卡片风格 | _boolean_ | `false` |
+| border         | 是否显示外边框         | _boolean_ | `true`  |
 
 ### Cell Props
 
@@ -215,3 +227,6 @@ app.use(CellGroup);
 | --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
 | --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
 | --van-cell-group-title-line-height | _16px_ | - |
+| --van-cell-group-inset-padding | _0 var(--van-padding-md)_ | - |
+| --van-cell-group-inset-border-radius | _var(--van-border-radius-lg)_ | - |
+| --van-cell-group-inset-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)_ | - |

src/cell/demo/index.vue

@@ -6,6 +6,13 @@
     </van-cell-group>
   </demo-block>
 
+  <demo-block v-if="!isWeapp" :title="t('insetGrouped')">
+    <van-cell-group inset>
+      <van-cell :title="t('cell')" :value="t('content')" />
+      <van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
+    </van-cell-group>
+  </demo-block>
+
   <demo-block :title="t('largeSize')">
     <van-cell :title="t('cell')" :value="t('content')" size="large" />
     <van-cell
@@ -80,30 +87,32 @@ import { useTranslate } from '@demo/use-translate';
 const i18n = {
   'zh-CN': {
     cell: '单元格',
-    valueOnly: '只设置 value',
-    showIcon: '展示图标',
-    showArrow: '展示箭头',
-    largeSize: '单元格大小',
     group: '分组',
-    groupTitle: '分组标题',
     router: '页面导航',
     urlRoute: 'URL 跳转',
     vueRoute: '路由跳转',
     useSlots: '使用插槽',
+    showIcon: '展示图标',
+    showArrow: '展示箭头',
+    largeSize: '单元格大小',
+    valueOnly: '只设置 value',
+    groupTitle: '分组标题',
+    insetGrouped: '卡片风格',
     verticalCenter: '垂直居中',
   },
   'en-US': {
     cell: 'Cell title',
-    valueOnly: 'Value only',
-    showIcon: 'Left Icon',
-    showArrow: 'Link',
-    largeSize: 'Size',
     group: 'Group',
-    groupTitle: 'Group Title',
     router: 'Router',
     urlRoute: 'URL',
     vueRoute: 'Vue Router',
     useSlots: 'Use Slots',
+    showIcon: 'Left Icon',
+    showArrow: 'Link',
+    largeSize: 'Size',
+    valueOnly: 'Value only',
+    groupTitle: 'Group Title',
+    insetGrouped: 'Inset Grouped',
     verticalCenter: 'Vertical center',
   },
 };

src/cell/test/__snapshots__/demo.spec.ts.snap

@@ -32,6 +32,37 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div class="van-cell-group van-cell-group--inset">
+    <div class="van-cell">
+      <div class="van-cell__title">
+        <span>
+          Cell title
+        </span>
+      </div>
+      <div class="van-cell__value">
+        <span>
+          Content
+        </span>
+      </div>
+    </div>
+    <div class="van-cell">
+      <div class="van-cell__title">
+        <span>
+          Cell title
+        </span>
+        <div class="van-cell__label">
+          Description
+        </div>
+      </div>
+      <div class="van-cell__value">
+        <span>
+          Content
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 <div>
   <div class="van-cell van-cell--large">
     <div class="van-cell__title">