feat(collapse): n-collapse add arrow slot

CHANGELOG.en-US.md

@@ -8,6 +8,10 @@
 - Fix `n-date-picker`'s input theme is not set in `date` & `datetime` type.
 - Fix `n-config-provider` doesn't merge inherited theme.
 
+### Feats
+
+- `n-collapse` add `arrow` slot
+
 ## 2.11.1
 
 Update package.json & README.md.

CHANGELOG.zh-CN.md

@@ -8,6 +8,10 @@
 - 修复 `n-date-picker` 输入组件在 `date` & `datetime` 类型下未设定主题
 - 修复 `n-config-provider` 没有合并继承的主题
 
+### Feats
+
+- `n-collapse` 新增 `arrow` slot
+
 ## 2.11.1
 
 更新 package.json & README.md

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

@@ -0,0 +1,31 @@
+# Customize Icon
+
+```html
+<n-collapse>
+  <template #arrow>
+    <n-icon>
+      <cash-icon />
+    </n-icon>
+  </template>
+  <n-collapse-item title="Bronze" name="1">
+    <div>good</div>
+  </n-collapse-item>
+  <n-collapse-item title="Silver" name="2">
+    <div>nice</div>
+  </n-collapse-item>
+  <n-collapse-item title="Gold" name="3">
+    <div>very good</div>
+  </n-collapse-item>
+</n-collapse>
+```
+
+```js
+import { defineComponent } from 'vue'
+import { CashOutline as CashIcon } from '@vicons/ionicons5'
+
+export default defineComponent({
+  components: {
+    CashIcon
+  }
+})
+```

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

@@ -11,6 +11,7 @@ accordion
 nested
 display-directive
 item-header-click
+customize-icon
 ```
 
 ## Props
@@ -39,9 +40,10 @@ item-header-click
 
 ### Collapse Slots
 
-| Name    | Parameters | Description |
-| ------- | ---------- | ----------- |
-| default | `()`       |             |
+| Name    | Parameters                          | Description |
+| ------- | ----------------------------------- | ----------- |
+| default | `()`                                |             |
+| arrow   | `(options: { collapsed: boolean })` |             |
 
 ### Collapse Item Slots
 

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

@@ -0,0 +1,31 @@
+# 自定义图标
+
+```html
+<n-collapse>
+  <template #arrow>
+    <n-icon>
+      <cash-icon />
+    </n-icon>
+  </template>
+  <n-collapse-item title="青铜" name="1">
+    <div>可以</div>
+  </n-collapse-item>
+  <n-collapse-item title="白银" name="2">
+    <div>很好</div>
+  </n-collapse-item>
+  <n-collapse-item title="黄金" name="3">
+    <div>真棒</div>
+  </n-collapse-item>
+</n-collapse>
+```
+
+```js
+import { defineComponent } from 'vue'
+import { CashOutline as CashIcon } from '@vicons/ionicons5'
+
+export default defineComponent({
+  components: {
+    CashIcon
+  }
+})
+```

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

@@ -11,6 +11,7 @@ accordion
 nested
 display-directive
 item-header-click
+customize-icon
 ```
 
 ## Props
@@ -39,9 +40,10 @@ item-header-click
 
 ### Collapse Slots
 
-| 名称    | 参数 | 说明 |
-| ------- | ---- | ---- |
-| default | `()` |      |
+| 名称    | 参数                                | 说明 |
+| ------- | ----------------------------------- | ---- |
+| default | `()`                                |      |
+| arrow   | `(options: { collapsed: boolean })` |      |
 
 ### Collapse Item Slots
 

src/collapse/src/Collapse.tsx

@@ -8,7 +8,8 @@ import {
   InjectionKey,
   Ref,
   ExtractPropTypes,
-  CSSProperties
+  CSSProperties,
+  Slots
 } from 'vue'
 import { intersection } from 'lodash-es'
 import { useConfig, useTheme } from '../../_mixins'
@@ -81,6 +82,7 @@ export interface NCollapseInjection {
   expandedNamesRef: Ref<string | number | Array<string | number> | null>
   mergedClsPrefixRef: Ref<string>
   collectedItemNames: Array<string | number>
+  slots: Slots
   toggleItem: (
     collapse: boolean,
     name: string | number,
@@ -88,18 +90,16 @@ export interface NCollapseInjection {
   ) => void
 }
 
-export const collapseInjectionKey: InjectionKey<NCollapseInjection> = Symbol(
-  'collapse'
-)
+export const collapseInjectionKey: InjectionKey<NCollapseInjection> =
+  Symbol('collapse')
 
 export default defineComponent({
   name: 'Collapse',
   props: collapseProps,
-  setup (props) {
+  setup (props, { slots }) {
     const { mergedClsPrefixRef } = useConfig(props)
-    const uncontrolledExpandedNamesRef = ref<
-    string | number | Array<string | number> | null
-    >(null)
+    const uncontrolledExpandedNamesRef =
+      ref<string | number | Array<string | number> | null>(null)
     const controlledExpandedNamesRef = computed(() => props.expandedNames)
     const mergedExpandedNamesRef = useMergedState(
       controlledExpandedNamesRef,
@@ -182,6 +182,7 @@ export default defineComponent({
       mergedClsPrefixRef,
       expandedNamesRef: mergedExpandedNamesRef,
       collectedItemNames,
+      slots,
       toggleItem
     })
     return {

src/collapse/src/CollapseItem.tsx

@@ -34,7 +34,8 @@ export default defineComponent({
     const {
       expandedNamesRef,
       props: collapseProps,
-      mergedClsPrefixRef
+      mergedClsPrefixRef,
+      slots: collapseSlots
     } = NCollapse
     useInjectionCollection(
       collapseInjectionKey,
@@ -52,6 +53,7 @@ export default defineComponent({
       return true
     })
     return {
+      collapseSlots,
       randomName,
       mergedClsPrefix: mergedClsPrefixRef,
       collapsed: collapsedRef,
@@ -75,6 +77,7 @@ export default defineComponent({
   },
   render () {
     const {
+      collapseSlots,
       $slots,
       arrowPlacement,
       collapsed,
@@ -100,11 +103,22 @@ export default defineComponent({
         >
           {arrowPlacement === 'right' && headerNode}
           <div class={`${mergedClsPrefix}-collapse-item-arrow`}>
-            {renderSlot($slots, 'arrow', { collapsed: collapsed }, () => [
-              <NBaseIcon clsPrefix={mergedClsPrefix}>
-                {{ default: () => <ArrowIcon /> }}
-              </NBaseIcon>
-            ])}
+            {renderSlot(
+              $slots.arrow
+                ? $slots
+                : collapseSlots.arrow
+                  ? collapseSlots
+                  : $slots,
+              'arrow',
+              { collapsed: collapsed },
+              () => [
+                <NBaseIcon clsPrefix={mergedClsPrefix}>
+                  {{
+                    default: collapseSlots.expandIcon ?? (() => <ArrowIcon />)
+                  }}
+                </NBaseIcon>
+              ]
+            )}
           </div>
           {arrowPlacement === 'left' && headerNode}
         </div>