From 12400a25277d27d1dc0386e9844f5e4ffc9fc229 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 26 Jun 2021 21:43:00 +0800
Subject: [PATCH] feat(CollapseItem): add label slot (#8934)

* feat(CollapseItem): add label slot

* docs: upd
---
 src/collapse-item/CollapseItem.tsx                |  9 +++------
 src/collapse/README.md                            | 15 ++++++++-------
 src/collapse/README.zh-CN.md                      | 15 ++++++++-------
 .../test/__snapshots__/index.spec.tsx.snap        |  3 +++
 src/collapse/test/index.spec.tsx                  |  3 ++-
 5 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/collapse-item/CollapseItem.tsx b/src/collapse-item/CollapseItem.tsx
index 7ba0de984..57e2c7b28 100644
--- a/src/collapse-item/CollapseItem.tsx
+++ b/src/collapse-item/CollapseItem.tsx
@@ -15,6 +15,8 @@ import { Cell } from '../cell';
 
 const [name, bem] = createNamespace('collapse-item');
 
+const CELL_SLOTS = ['icon', 'title', 'value', 'label', 'right-icon'] as const;
+
 export default defineComponent({
   name,
 
@@ -112,12 +114,7 @@ export default defineComponent({
 
       return (
         <Cell
-          v-slots={{
-            icon: slots.icon,
-            title: slots.title,
-            default: slots.value,
-            'right-icon': slots['right-icon'],
-          }}
+          v-slots={pick(slots, CELL_SLOTS)}
           role="button"
           class={bem('title', {
             disabled,
diff --git a/src/collapse/README.md b/src/collapse/README.md
index 818567132..fc2e45b54 100644
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@@ -144,13 +144,14 @@ export default {
 
 ### CollapseItem Slots
 
-| Name       | Description       |
-| ---------- | ----------------- |
-| default    | Content           |
-| value      | Custom value      |
-| icon       | Custom icon       |
-| title      | Custom title      |
-| right-icon | Custom right icon |
+| Name           | Description              |
+| -------------- | ------------------------ |
+| default        | Content                  |
+| title          | Custom header title      |
+| value          | Custom header value      |
+| label `v3.1.1` | Custom header label      |
+| icon           | Custom header left icon  |
+| right-icon     | Custom header right icon |
 
 ### CollapseItem Methods
 
diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md
index 8b002d445..bc3f7e70b 100644
--- a/src/collapse/README.zh-CN.md
+++ b/src/collapse/README.zh-CN.md
@@ -142,13 +142,14 @@ export default {
 
 ### CollapseItem Slots
 
-| 名称       | 说明                           |
-| ---------- | ------------------------------ |
-| default    | 面板内容                       |
-| value      | 自定义显示内容                 |
-| icon       | 自定义 `icon`                  |
-| title      | 自定义 `title`                 |
-| right-icon | 自定义右侧按钮，默认是 `arrow` |
+| 名称           | 说明                 |
+| -------------- | -------------------- |
+| default        | 面板内容             |
+| title          | 自定义标题栏左侧内容 |
+| value          | 自定义标题栏右侧内容 |
+| label `v3.1.1` | 自定义标题栏描述信息 |
+| icon           | 自定义标题栏左侧图标 |
+| right-icon     | 自定义标题栏右侧图标 |
 
 ### CollapseItem 方法
 
diff --git a/src/collapse/test/__snapshots__/index.spec.tsx.snap b/src/collapse/test/__snapshots__/index.spec.tsx.snap
index 77d9e01df..9d12fae7b 100644
--- a/src/collapse/test/__snapshots__/index.spec.tsx.snap
+++ b/src/collapse/test/__snapshots__/index.spec.tsx.snap
@@ -11,6 +11,9 @@ exports[`should render slots of CollapseItem correctly 1`] = `
       this is icon
       <div class="van-cell__title">
         this is title
+        <div class="van-cell__label">
+          this is label
+        </div>
       </div>
       <div class="van-cell__value">
         this is value
diff --git a/src/collapse/test/index.spec.tsx b/src/collapse/test/index.spec.tsx
index 12915b02a..3afd484a7 100644
--- a/src/collapse/test/index.spec.tsx
+++ b/src/collapse/test/index.spec.tsx
@@ -85,9 +85,10 @@ test('should render slots of CollapseItem correctly', () => {
         <Collapse v-model={this.active}>
           <CollapseItem
             v-slots={{
+              icon: () => 'this is icon',
               title: () => 'this is title',
               value: () => 'this is value',
-              icon: () => 'this is icon',
+              label: () => 'this is label',
               'right-icon': () => 'this is right icon',
             }}
           />