From 98721b7b7e2a1fa032a465e5f653a14af1a85db5 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Mon, 19 Jul 2021 12:24:56 +0800
Subject: [PATCH] feat(Cell): cell-group inset prop (#4341)

* feat(Cell): cell-group inset prop

* fix(Cell): remove inset prop default value
---
 example/pages/cell/index.wxml  |  7 +++++
 packages/cell-group/index.less | 11 +++++++
 packages/cell-group/index.ts   |  1 +
 packages/cell-group/index.wxml |  6 ++--
 packages/cell/README.md        | 56 +++++++++++++++++++++-------------
 packages/common/style/var.less |  3 ++
 6 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/example/pages/cell/index.wxml b/example/pages/cell/index.wxml
index ebf0bdd7..72130cb3 100644
--- a/example/pages/cell/index.wxml
+++ b/example/pages/cell/index.wxml
@@ -10,6 +10,13 @@
   </van-cell-group>
 </demo-block>
 
+<demo-block title="卡片风格">
+  <van-cell-group inset>
+    <van-cell title="单元格" value="内容" />
+    <van-cell title="单元格" value="内容" label="描述信息" />
+  </van-cell-group>
+</demo-block>
+
 <demo-block title="单元格大小">
   <van-cell-group>
     <van-cell
diff --git a/packages/cell-group/index.less b/packages/cell-group/index.less
index a2bdf0cb..1b6dab4d 100644
--- a/packages/cell-group/index.less
+++ b/packages/cell-group/index.less
@@ -2,10 +2,21 @@
 @import '../common/style/theme.less';
 
 .van-cell-group {
+  &--inset {
+    .theme(margin, '@cell-group-inset-padding');
+    .theme(border-radius, '@cell-group-inset-border-radius');
+
+    overflow: hidden;
+  }
+
   &__title {
     .theme(padding, '@cell-group-title-padding');
     .theme(font-size, '@cell-group-title-font-size');
     .theme(line-height, '@cell-group-title-line-height');
     .theme(color, '@cell-group-title-color');
+
+    &--inset {
+      .theme(padding, '@cell-group-inset-title-padding');
+    }
   }
 }
diff --git a/packages/cell-group/index.ts b/packages/cell-group/index.ts
index 954cbd29..7891f58d 100644
--- a/packages/cell-group/index.ts
+++ b/packages/cell-group/index.ts
@@ -7,5 +7,6 @@ VantComponent({
       type: Boolean,
       value: true,
     },
+    inset: Boolean,
   },
 });
diff --git a/packages/cell-group/index.wxml b/packages/cell-group/index.wxml
index 6e0b471d..311e064a 100644
--- a/packages/cell-group/index.wxml
+++ b/packages/cell-group/index.wxml
@@ -1,9 +1,11 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   wx:if="{{ title }}"
-  class="van-cell-group__title"
+  class="{{ utils.bem('cell-group__title', { inset }) }}"
 >
   {{ title }}
 </view>
-<view class="custom-class van-cell-group {{ border ? 'van-hairline--top-bottom' : '' }}">
+<view class="custom-class {{ utils.bem('cell-group', { inset }) }} {{ border ? 'van-hairline--top-bottom' : '' }}">
   <slot />
 </view>
diff --git a/packages/cell/README.md b/packages/cell/README.md
index 60172908..db8290fd 100644
--- a/packages/cell/README.md
+++ b/packages/cell/README.md
@@ -28,6 +28,17 @@
 </van-cell-group>
 ```
 
+### 卡片风格
+
+通过 `CellGroup` 的 `inset` 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。
+
+```html
+<van-cell-group inset>
+  <van-cell title="单元格" value="内容" />
+  <van-cell title="单元格" value="内容" label="描述信息" />
+</van-cell-group>
+```
+
 ### 单元格大小
 
 通过`size`属性可以控制单元格的大小。
@@ -109,10 +120,11 @@
 
 ### CellGroup Props
 
-| 参数   | 说明           | 类型      | 默认值 | 版本 |
-| ------ | -------------- | --------- | ------ | ---- |
-| title  | 分组标题       | _string_  | `-`    | -    |
-| border | 是否显示外边框 | _boolean_ | `true` | -    |
+| 参数           | 说明                   | 类型      | 默认值  |
+| -------------- | ---------------------- | --------- | ------- |
+| title          | 分组标题               | _string_  | `-`     |
+| inset `v1.7.2` | 是否展示为圆角卡片风格 | _boolean_ | `false` |
+| border         | 是否显示外边框         | _boolean_ | `true`  |
 
 ### CellGroup 外部样式类
 
@@ -122,24 +134,24 @@
 
 ### Cell Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
-| title | 左侧标题 | _string \| number_ | - |
-| title-width | 标题宽度，须包含单位 | _string_ | - | - |
-| value | 右侧内容 | _string \| number_ | - | - |
-| label | 标题下方的描述信息 | _string_ | - | - |
-| size | 单元格大小，可选值为 `large` | _string_ | - | - |
-| border | 是否显示下边框 | _boolean_ | `true` | - |
-| center | 是否使内容垂直居中 | _boolean_ | `false` | - |
-| url | 点击后跳转的链接地址 | _string_ | - | - |
-| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - |
-| clickable | 是否开启点击反馈 | _boolean_ | `false` | - |
-| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | - |
-| required | 是否显示表单必填星号 | _boolean_ | `false` | - |
-| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - | - |
-| use-label-slot | 是否使用 label slot | _boolean_ | `false` | - |
-| title-style | 标题样式 | _string_ | - | 1.4.0 |
+| 参数                 | 说明                                                       | 类型               | 默认值       |
+| -------------------- | ---------------------------------------------------------- | ------------------ | ------------ |
+| icon                 | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon)       | _string_           | -            |
+| title                | 左侧标题                                                   | _string \| number_ | -            |
+| title-width          | 标题宽度，须包含单位                                       | _string_           | -            |
+| value                | 右侧内容                                                   | _string \| number_ | -            |
+| label                | 标题下方的描述信息                                         | _string_           | -            |
+| size                 | 单元格大小，可选值为 `large`                               | _string_           | -            |
+| border               | 是否显示下边框                                             | _boolean_          | `true`       |
+| center               | 是否使内容垂直居中                                         | _boolean_          | `false`      |
+| url                  | 点击后跳转的链接地址                                       | _string_           | -            |
+| link-type            | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_           | `navigateTo` |
+| clickable            | 是否开启点击反馈                                           | _boolean_          | `false`      |
+| is-link              | 是否展示右侧箭头并开启点击反馈                             | _boolean_          | `false`      |
+| required             | 是否显示表单必填星号                                       | _boolean_          | `false`      |
+| arrow-direction      | 箭头方向，可选值为 `left` `up` `down`                      | _string_           | -            |
+| use-label-slot       | 是否使用 label slot                                        | _boolean_          | `false`      |
+| title-style `v1.4.0` | 标题样式                                                   | _string_           | -            |
 
 ### Cell Event
 
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 601334ee..c66eb8f8 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -193,6 +193,9 @@
 @cell-group-title-padding: @padding-md @padding-md @padding-xs;
 @cell-group-title-font-size: @font-size-md;
 @cell-group-title-line-height: 16px;
+@cell-group-inset-padding: 0 @padding-md;
+@cell-group-inset-border-radius: @border-radius-lg;
+@cell-group-inset-title-padding: @padding-md @padding-md @padding-xs @padding-xl;
 
 // Checkbox
 @checkbox-size: 20px;