feat(collapse): add header-extra slot (#1064)

* feat(collapse): add 'header-extra' slot

* feat(collapse): add test

* feat(collapse): 优化样式

* feat(collapse): 优化样式

* feat(collapse): 优化样式

* feat: add test

Co-authored-by: unknown <liyang@xiaoyouzi.com>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -11,6 +11,8 @@
 - Fix `n-cascader` click tag to delete the sub option in multi selection mode, and the tree option is not updated.
 - Fix `n-input` chinese input method not correct while mouse leave the input in `clearable` is true, closes [#905](https://github.com/TuSimple/naive-ui/issues/905).
 - Fix `n-description`'s warning caused by `v-if` that should not appear, closes [#1083](https://github.com/TuSimple/naive-ui/issues/1083).
+- Fix `n-layout`'s `sider-placement` doesn't work after build, closes [#978](https://github.com/TuSimple/naive-ui/issues/978).
+- Fix `n-input-number`'s `step` calculate error when the value is decimal, closes [#1007](https://github.com/TuSimple/naive-ui/issues/1007).
 
 ### Feats
 
@@ -32,11 +34,7 @@
 - `n-pagination` export `PaginationInfo` type.
 - `n-data-table` export `DataTableCreateSummary` type.
 - `n-code` add `inline` prop, closes [#834](https://github.com/TuSimple/naive-ui/issues/834)
-
+- `n-collapse` add 'header-extra' slot, closes [#1046](https://github.com/TuSimple/naive-ui/issues/1046).
-### Fixes
-
-- Fix `n-layout`'s `sider-placement` doesn't work after build, closes [#978](https://github.com/TuSimple/naive-ui/issues/978).
-- Fix `n-input-number`'s `step` calculate error when the value is decimal, closes [#1007](https://github.com/TuSimple/naive-ui/issues/1007).
 
 ## 2.16.7 (2021-08-27)
 

CHANGELOG.zh-CN.md

@@ -11,6 +11,8 @@
 - 修复 `n-cascader` 多选模式下点击 tag 删除子选项未更新选中项
 - 修复 `n-input` 在 `clearable` 为 `true` 时鼠标离开输入框时中文输入法不正确，关闭 [#905](https://github.com/TuSimple/naive-ui/issues/905)
 - 修复 `n-description` 中因 `v-if` 导致的不该出现的警告，关闭 [#1083](https://github.com/TuSimple/naive-ui/issues/1083)
+- 修复 `n-layout` 的 `sider-placement` 属性在打包之后不生效，关闭 [#978](https://github.com/TuSimple/naive-ui/issues/978)
+- 修复 `n-input-number` 的 `step` 值为小数时计算错误，关闭 [#1007](https://github.com/TuSimple/naive-ui/issues/1007)
 
 ### Feats
 
@@ -32,11 +34,7 @@
 - `n-pagination` 导出 `PaginationInfo` 类型
 - `n-data-table` 导出 `DataTableCreateSummary` 类型
 - `n-code` 新增 `inline` 属性, 关闭 [#834](https://github.com/TuSimple/naive-ui/issues/834)
-
+- `n-collapse` 新增 slot: 'header-extra'，关闭 [#1046](https://github.com/TuSimple/naive-ui/issues/1046)
-### Fixes
-
-- 修复 `n-layout` 的 `sider-placement` 属性在打包之后不生效，关闭 [#978](https://github.com/TuSimple/naive-ui/issues/978)
-- 修复 `n-input-number` 的 `step` 值为小数时计算错误，关闭 [#1007](https://github.com/TuSimple/naive-ui/issues/1007)
 
 ## 2.16.7 (2021-08-27)
 

src/collapse/demos/enUS/customize-icon.demo.md

@@ -2,6 +2,9 @@
 
 ```html
 <n-collapse>
+  <template #header-extra>
+    <n-icon><cash-icon /></n-icon>
+  </template>
   <template #arrow>
     <n-icon>
       <cash-icon />

src/collapse/demos/enUS/index.demo-entry.md

@@ -52,4 +52,5 @@ default-expanded
 | --- | --- | --- |
 | default | `()` | The contents of the collapsible panel node. |
 | header | `()` | The content of the header of the collapsed panel node. |
+| header-extra | `()` | The extra content of the header of the collapsed panel node. |
 | arrow | `(options: { collapsed: boolean })` | The custom icon of the node header of the collapsible panel. |

src/collapse/demos/zhCN/customize-icon.demo.md

@@ -2,6 +2,9 @@
 
 ```html
 <n-collapse>
+  <template #header-extra>
+    <n-icon><cash-icon /></n-icon>
+  </template>
   <template #arrow>
     <n-icon>
       <cash-icon />

src/collapse/demos/zhCN/index.demo-entry.md

@@ -48,8 +48,9 @@ default-expanded
 
 ### Collapse Item Slots
 
-| 名称    | 参数                                | 说明                         |
+| 名称 | 参数 | 说明 |
-| ------- | ----------------------------------- | ---------------------------- |
+| --- | --- | --- |
-| default | `()`                                | 折叠面板节点的内容           |
+| default | `()` | 折叠面板节点的内容 |
-| header  | `()`                                | 折叠面板节点头部的内容       |
+| header | `()` | 折叠面板节点头部的内容 |
-| arrow   | `(options: { collapsed: boolean })` | 折叠面板节点头部的自定义图标 |
+| header-extra | `()` | 折叠面板节点头部的额外内容 |
+| arrow | `(options: { collapsed: boolean })` | 折叠面板节点头部的自定义图标 |

src/collapse/src/CollapseItem.tsx

@@ -102,28 +102,42 @@ export default defineComponent({
             `${mergedClsPrefix}-collapse-item__header`,
             !collapsed && `${mergedClsPrefix}-collapse-item__header--active`
           ]}
-          onClick={this.handleClick}
         >
-          {arrowPlacement === 'right' && headerNode}
+          <div
-          <div class={`${mergedClsPrefix}-collapse-item-arrow`}>
+            class={`${mergedClsPrefix}-collapse-item__header-main`}
+            onClick={this.handleClick}
+          >
+            {arrowPlacement === 'right' && headerNode}
+            <div class={`${mergedClsPrefix}-collapse-item-arrow`}>
+              {renderSlot(
+                $slots.arrow
+                  ? $slots
+                  : collapseSlots.arrow
+                    ? collapseSlots
+                    : $slots,
+                'arrow',
+                { collapsed: collapsed },
+                () => [
+                  <NBaseIcon clsPrefix={mergedClsPrefix}>
+                    {{
+                      default: collapseSlots.expandIcon ?? (() => <ArrowIcon />)
+                    }}
+                  </NBaseIcon>
+                ]
+              )}
+            </div>
+            {arrowPlacement === 'left' && headerNode}
+          </div>
+          <div class={`${mergedClsPrefix}-collapse-item__header-extra`}>
             {renderSlot(
-              $slots.arrow
+              $slots['header-extra']
                 ? $slots
-                : collapseSlots.arrow
+                : collapseSlots['header-extra']
                   ? collapseSlots
                   : $slots,
-              'arrow',
+              'header-extra'
-              { collapsed: collapsed },
-              () => [
-                <NBaseIcon clsPrefix={mergedClsPrefix}>
-                  {{
-                    default: collapseSlots.expandIcon ?? (() => <ArrowIcon />)
-                  }}
-                </NBaseIcon>
-              ]
             )}
           </div>
-          {arrowPlacement === 'left' && headerNode}
         </div>
         <NCollapseItemContent
           clsPrefix={mergedClsPrefix}

src/collapse/src/styles/index.cssr.ts

@@ -74,6 +74,23 @@ export default cB('collapse', {
       padding: 16px 0 0 0;
       color: var(--title-text-color);
     `, [
+      cE('header-main', `
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        font-weight: var(--title-font-weight);
+        transition: color .3s var(--bezier);
+        flex: 1;
+        color: var(--title-text-color);
+      `),
+      cE('header-extra', `
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: 400;
+        transition: color .3s var(--bezier);
+        color: var(--text-color);
+      `),
       cB('collapse-item-arrow', `
         display: flex;
         transition:

src/collapse/tests/Collapse.spec.tsx

@@ -86,11 +86,32 @@ describe('n-collapse', () => {
         default: () => <NCollapseItem name="1"></NCollapseItem>
       }
     })
-    const triggerNodeWrapper = wrapper.find('.n-collapse-item__header')
+    const triggerNodeWrapper = wrapper.find('.n-collapse-item__header-main')
     await triggerNodeWrapper.trigger('click')
     expect(onClick).toHaveBeenCalled()
   })
 
+  it('should work with `slots` ', async () => {
+    const wrapper = mount(NCollapse, {
+      slots: {
+        header: () => 'header',
+        'header-extra': () => 'header-extra',
+        default: () => <NCollapseItem name="1"></NCollapseItem>,
+        arrow: () => 'arrow'
+      }
+    })
+    expect(wrapper.find('.n-collapse-item__header-main').exists()).toBe(true)
+    expect(wrapper.find('.n-collapse-item__header-main').text()).toBe('arrow')
+
+    expect(wrapper.find('.n-collapse-item__header-extra').exists()).toBe(true)
+    expect(wrapper.find('.n-collapse-item__header-extra').text()).toBe(
+      'header-extra'
+    )
+
+    expect(wrapper.find('.n-collapse-item-arrow').exists()).toBe(true)
+    expect(wrapper.find('.n-collapse-item-arrow').text()).toBe('arrow')
+  })
+
   it('props.defaultExpandedNames', async () => {
     let wrapper = mount(NCollapse, {
       props: {