feat(collapse-item): header-extra & header slots supports `collap…

…sed` param, closes #3723
tusen-ai · Sep 18, 2022 · d6bba71 · d6bba71
1 parent 06d5295
commit d6bba71
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 30 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -4,8 +4,12 @@
 
 ### Fixes
 
-- 修复 `n-timeline-item` 的 `title` 的 `margin-bottom` 无法通过主题变量设置，关闭 [#3722](https://github.com/tusen-ai/naive-ui/issues/3722)
-- 修复 `n-timeline-item` 的 `meta` 在水平垂直嵌套时 `margin-bottom` 被覆盖
+- Fix `n-timeline-item`'s `title`'s `margin-bottom` can't be set by theme variable, closes [#3722](https://github.com/tusen-ai/naive-ui/issues/3722).
+- Fix `n-timeline-item`'s `meta` part's `margin-bottom` is overrided when nested in horizontal and vertical mode.
+
+### Feats
+
+- `n-collapse-item`'s `header-extra` & `header` slots supports `collapsed` param, closes [#3723](https://github.com/tusen-ai/naive-ui/issues/3723).
 
 ## 2.33.3
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,13 +1,15 @@
 # CHANGELOG
 
-### NEXT_VERSION
-
 ## NEXT_VERSION
 
 ### Fixes
 
-- Fix `n-timeline-item`'s `title`'s `margin-bottom` can't be set by theme variable, closes [#3722](https://github.com/tusen-ai/naive-ui/issues/3722).
-- Fix `n-timeline-item`'s `meta` part's `margin-bottom` is overrided when nested in horizontal and vertical mode.
+- 修复 `n-timeline-item` 的 `title` 的 `margin-bottom` 无法通过主题变量设置，关闭 [#3722](https://github.com/tusen-ai/naive-ui/issues/3722)
+- 修复 `n-timeline-item` 的 `meta` 在水平垂直嵌套时 `margin-bottom` 被覆盖
+
+### Feats
+
+- `n-collapse-item` 的 `header-extra` 和 `header` 插槽支持 `collapsed` 参数，关闭 [#3723](https://github.com/tusen-ai/naive-ui/issues/3723)
 
 ## 2.33.3
 

diff --git a/src/_utils/index.ts b/src/_utils/index.ts
@@ -17,6 +17,7 @@ export {
   isSlotEmpty,
   mergeEventHandlers,
   isNodeVShowFalse,
+  resolveWrappedSlotWithProps,
   Wrapper
 } from './vue'
 export type { MaybeArray } from './vue'

diff --git a/src/_utils/vue/index.ts b/src/_utils/vue/index.ts
@@ -14,6 +14,7 @@ export {
   resolveSlot,
   resolveWrappedSlot,
   resolveSlotWithProps,
+  resolveWrappedSlotWithProps,
   isSlotEmpty
 } from './resolve-slot'
 export type { MaybeArray } from './call'

diff --git a/src/_utils/vue/resolve-slot.ts b/src/_utils/vue/resolve-slot.ts
@@ -58,6 +58,18 @@ export function resolveWrappedSlot (
   return wrapper(children || null)
 }
 
+/*
+ * Resolve slot with wrapper if content exists, no fallback
+ */
+export function resolveWrappedSlotWithProps (
+  slot: Slot | undefined,
+  props: any,
+  wrapper: (children: VNodeArrayChildren | null) => VNodeChild
+): VNodeChild {
+  const children = slot && ensureValidVNode(slot(props))
+  return wrapper(children || null)
+}
+
 export function isSlotEmpty (slot: Slot | undefined): boolean {
   return !(slot && ensureValidVNode(slot()))
 }
diff --git a/src/collapse/demos/enUS/index.demo-entry.md b/src/collapse/demos/enUS/index.demo-entry.md
@@ -45,13 +45,13 @@ disabled.vue
 | Name | Parameters | Description |
 | --- | --- | --- |
 | default | `()` | The contents of the collapsible panel. |
-| arrow | `(options: { collapsed: boolean })` | Custom icons for folding panels. |
+| arrow | `(props: { collapsed: boolean })` | Custom icons for folding panels. |
 
 ### CollapseItem Slots
 
 | Name | Parameters | Description |
 | --- | --- | --- |
 | 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. |
+| header | `(props: { collapsed: boolean })` | The content of the header of the collapsed panel node. |
+| header-extra | `(props: { collapsed: boolean })` | The extra content of the header of the collapsed panel node. |
+| arrow | `(props: { collapsed: boolean })` | The custom icon of the node header of the collapsible panel. |
diff --git a/src/collapse/demos/zhCN/index.demo-entry.md b/src/collapse/demos/zhCN/index.demo-entry.md
@@ -43,16 +43,16 @@ rtl-debug.vue
 
 ### Collapse Slots
 
-| 名称    | 参数                                | 说明                 |
-| ------- | ----------------------------------- | -------------------- |
-| default | `()`                                | 折叠面板的内容       |
-| arrow   | `(options: { collapsed: boolean })` | 折叠面板的自定义图标 |
+| 名称    | 参数                              | 说明                 |
+| ------- | --------------------------------- | -------------------- |
+| default | `()`                              | 折叠面板的内容       |
+| arrow   | `(props: { collapsed: boolean })` | 折叠面板的自定义图标 |
 
 ### CollapseItem Slots
 
 | 名称 | 参数 | 说明 |
 | --- | --- | --- |
 | default | `()` | 折叠面板节点的内容 |
-| header | `()` | 折叠面板节点头部的内容 |
-| header-extra | `()` | 折叠面板节点头部的额外内容 |
-| arrow | `(options: { collapsed: boolean })` | 折叠面板节点头部的自定义图标 |
+| header | `(props: { collapsed: boolean })` | 折叠面板节点头部的内容 |
+| header-extra | `(props: { collapsed: boolean })` | 折叠面板节点头部的额外内容 |
+| arrow | `(props: { collapsed: boolean })` | 折叠面板节点头部的自定义图标 |
diff --git a/src/collapse/src/CollapseItem.tsx b/src/collapse/src/CollapseItem.tsx
@@ -6,7 +6,12 @@ import {
   ChevronLeftIcon as ArrowLeftIcon
 } from '../../_internal/icons'
 import { NBaseIcon } from '../../_internal'
-import { ExtractPublicPropTypes, throwError } from '../../_utils'
+import type { ExtractPublicPropTypes } from '../../_utils'
+import {
+  throwError,
+  resolveSlotWithProps,
+  resolveWrappedSlotWithProps
+} from '../../_utils'
 import { collapseInjectionKey } from './Collapse'
 import NCollapseItemContent from './CollapseItemContent'
 import { useRtl } from '../../_mixins/use-rtl'
@@ -92,7 +97,11 @@ export default defineComponent({
       mergedClsPrefix,
       disabled
     } = this
-    const headerNode = $slots.header ? $slots.header() : this.title
+    const headerNode = resolveSlotWithProps(
+      $slots.header,
+      { collapsed },
+      () => [this.title]
+    )
     const headerExtraSlot =
       $slots['header-extra'] || collapseSlots['header-extra']
     const arrowSlot = $slots.arrow || collapseSlots.arrow
@@ -120,9 +129,7 @@ export default defineComponent({
               class={`${mergedClsPrefix}-collapse-item-arrow`}
               key={this.rtlEnabled ? 0 : 1}
             >
-              {arrowSlot ? (
-                arrowSlot({ collapsed })
-              ) : (
+              {resolveSlotWithProps(arrowSlot, { collapsed }, () => [
                 <NBaseIcon clsPrefix={mergedClsPrefix}>
                   {{
                     default:
@@ -135,17 +142,21 @@ export default defineComponent({
                         ))
                   }}
                 </NBaseIcon>
-              )}
+              ])}
             </div>
             {arrowPlacement === 'left' && headerNode}
           </div>
-          {headerExtraSlot && (
-            <div
-              class={`${mergedClsPrefix}-collapse-item__header-extra`}
-              onClick={this.handleClick}
-            >
-              {{ default: headerExtraSlot }}
-            </div>
+          {resolveWrappedSlotWithProps(
+            headerExtraSlot,
+            { collapsed },
+            (children) => (
+              <div
+                class={`${mergedClsPrefix}-collapse-item__header-extra`}
+                onClick={this.handleClick}
+              >
+                {children}
+              </div>
+            )
           )}
         </div>
         <NCollapseItemContent