feat(transfer): source target title prop to support render function (t…

…usen-ai#6006) * feat(n-transfer): source title prop to support render function * feat: add docs * feat: add target title --------- Co-authored-by: 07akioni <[email protected]>
jahnli · Jul 21, 2024 · f606e62 · f606e62
1 parent b0439c8
commit f606e62
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 9 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -18,6 +18,7 @@
 - `n-upload` adds `on-retry` prop, closes [#6031](https://github.com/tusen-ai/naive-ui/issues/6031)
 - Adds `n-highlight` component.
 - `n-slider` `marks` prop to support render function, closes [#5967](https://github.com/tusen-ai/naive-ui/issues/5967)
+- `n-transfer` `source-title` `target-title` prop to support render function, closes [#6004](https://github.com/tusen-ai/naive-ui/issues/6004)
 
 ## 2.39.0
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -18,6 +18,7 @@
 - `n-upload` 新增 `on-retry`属性，关闭 [#6031](https://github.com/tusen-ai/naive-ui/issues/6031)
 - 新增 `n-highlight` 组件
 - `n-slider` `marks` 支持渲染函数，关闭 [#5967](https://github.com/tusen-ai/naive-ui/issues/5967)
+- `n-transfer` `source-title` `target-title` 支持渲染函数，关闭 [#6004](https://github.com/tusen-ai/naive-ui/issues/6004)
 
 ## 2.39.0
 

diff --git a/src/transfer/demos/enUS/index.demo-entry.md b/src/transfer/demos/enUS/index.demo-entry.md
@@ -34,10 +34,10 @@ render-source-list.vue
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size. | 2.32.0 |
 | source-filterable | `boolean` | `false` | The source filterable state. | 2.32.2 |
 | source-filter-placeholder | `string` | `undefined` | Placeholder for the source items search box. | 2.32.0 |
-| source-title | `string` | `'undefined'` | Source items title. | 2.32.0 |
+| source-title | `string \| (() => VNodeChild)` | `undefined` | Source items title. | 2.32.0, Render function since NEXT_VERSION |
 | target-filterable | `boolean` | `false` | The target filterable state. | 2.32.2 |
 | target-filter-placeholder | `string` | `undefined` | Placeholder for the target items search box. | 2.32.0 |
-| target-title | `string` | `undefined` | Target items title. | 2.32.0 |
+| target-title | `string \| (() => VNodeChild)` | `undefined` | Target items title. | 2.32.0, Render function since NEXT_VERSION |
 | value | `Array<string \| number> \| null` | `undefined` | Value when being set manually. | 2.32.0 |
 | on-update:value | `(value: Array<string \| number>) => void` | `undefined` | Callback when the value changes. | 2.32.0 |
 | virtual-scroll | `boolean` | `false` | Enable virtual scrolling. | 2.32.0 |

diff --git a/src/transfer/demos/zhCN/index.demo-entry.md b/src/transfer/demos/zhCN/index.demo-entry.md
@@ -36,10 +36,10 @@ value-debug.vue
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 | 2.32.0 |
 | source-filterable | `boolean` | `false` | 源项是否可过滤 | 2.32.2 |
 | source-filter-placeholder | `string` | `undefined` | 源项搜索框中的占位符 | 2.32.0 |
-| source-title | `string` | `undefined` | 源项标题 | 2.32.0 |
+| source-title | `string \| (() => VNodeChild)` | `undefined` | 源项标题 | 2.32.0，NEXT_VERSION 支持 render 函数 |
 | target-filterable | `boolean` | `false` | 目标项是否可过滤 | 2.32.2 |
 | target-filter-placeholder | `string` | `undefined` | 目标项搜索框中的占位符 | 2.32.0 |
-| target-title | `string` | `undefined` | 目标项标题 | 2.32.0 |
+| target-title | `string \| (() => VNodeChild)` | `undefined` | 目标项标题 | 2.32.0，NEXT_VERSION 支持 render 函数 |
 | value | `Array<string \| number> \| null` | `undefined` | 受控模式下的值 | 2.32.0 |
 | on-update:value | `(value: Array<string \| number>) => void` | `undefined` | 值发生改变时的回调 | 2.32.0 |
 | virtual-scroll | `boolean` | `false` | 是否启用虚拟滚动 | 2.32.0 |

diff --git a/src/transfer/src/Transfer.tsx b/src/transfer/src/Transfer.tsx
@@ -1,6 +1,7 @@
 import {
   type CSSProperties,
   type PropType,
+ type VNodeChild,
   computed,
   defineComponent,
   h,
@@ -54,10 +55,10 @@ export const transferProps = {
     default: undefined
   },
   virtualScroll: Boolean,
-  sourceTitle: String,
+  sourceTitle: [String, Function] as PropType<string | (() => VNodeChild)>,
   selectAllText: String,
   clearText: String,
-  targetTitle: String,
+  targetTitle: [String, Function] as PropType<string | (() => VNodeChild)>,
   filterable: {
     type: Boolean,
     default: undefined

diff --git a/src/transfer/src/TransferHeader.tsx b/src/transfer/src/TransferHeader.tsx
@@ -1,4 +1,4 @@
-import { type PropType, defineComponent, h, inject } from 'vue'
+import { type PropType, type VNodeChild, defineComponent, h, inject } from 'vue'
 import { NButton } from '../../button'
 import { useLocale } from '../../_mixins'
 import { transferInjectionKey } from './interface'
@@ -15,7 +15,7 @@ export default defineComponent({
     source: Boolean,
     onCheckedAll: Function as PropType<() => void>,
     onClearAll: Function as PropType<() => void>,
-    title: String
+    title: [String, Function] as PropType<string | (() => VNodeChild)>
   },
   setup(props) {
     const {
@@ -41,7 +41,7 @@ export default defineComponent({
         <div class={`${mergedClsPrefix}-transfer-list-header`}>
           {title && (
             <div class={`${mergedClsPrefix}-transfer-list-header__title`}>
-              {title}
+              {typeof title === 'function' ? [title()] : [title]}
             </div>
           )}
           {source && (