feat(CollapseItem): add label slot (#8934)

* feat(CollapseItem): add label slot

* docs: upd

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={{
+          v-slots={pick(slots, CELL_SLOTS)}
-            icon: slots.icon,
-            title: slots.title,
-            default: slots.value,
-            'right-icon': slots['right-icon'],
-          }}
           role="button"
           class={bem('title', {
             disabled,

src/collapse/README.md

@@ -144,13 +144,14 @@ export default {
 
 ### CollapseItem Slots
 
-| Name       | Description       |
+| Name           | Description              |
-| ---------- | ----------------- |
+| -------------- | ------------------------ |
-| default    | Content           |
+| default        | Content                  |
-| value      | Custom value      |
+| title          | Custom header title      |
-| icon       | Custom icon       |
+| value          | Custom header value      |
-| title      | Custom title      |
+| label `v3.1.1` | Custom header label      |
-| right-icon | Custom right icon |
+| icon           | Custom header left icon  |
+| right-icon     | Custom header right icon |
 
 ### CollapseItem Methods
 

src/collapse/README.zh-CN.md

@@ -142,13 +142,14 @@ export default {
 
 ### CollapseItem Slots
 
-| 名称       | 说明                           |
+| 名称           | 说明                 |
-| ---------- | ------------------------------ |
+| -------------- | -------------------- |
-| default    | 面板内容                       |
+| default        | 面板内容             |
-| value      | 自定义显示内容                 |
+| title          | 自定义标题栏左侧内容 |
-| icon       | 自定义 `icon`                  |
+| value          | 自定义标题栏右侧内容 |
-| title      | 自定义 `title`                 |
+| label `v3.1.1` | 自定义标题栏描述信息 |
-| right-icon | 自定义右侧按钮，默认是 `arrow` |
+| icon           | 自定义标题栏左侧图标 |
+| right-icon     | 自定义标题栏右侧图标 |
 
 ### CollapseItem 方法
 

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

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',
             }}
           />