feat(n-transfer): source title prop to support render function

tusen-ai · Jun 2, 2024 · a37f513 · a37f513
1 parent a6d4b11
commit a37f513
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/src/transfer/demos/enUS/index.demo-entry.md b/src/transfer/demos/enUS/index.demo-entry.md
@@ -34,7 +34,7 @@ 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 |

diff --git a/src/transfer/demos/zhCN/index.demo-entry.md b/src/transfer/demos/zhCN/index.demo-entry.md
@@ -36,7 +36,7 @@ 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 |

diff --git a/src/transfer/src/Transfer.tsx b/src/transfer/src/Transfer.tsx
@@ -6,7 +6,8 @@ import {
   type PropType,
   type CSSProperties,
   watchEffect,
-  toRef
+  toRef,
+  type VNodeChild
 } from 'vue'
 import { useIsMounted } from 'vooks'
 import { depx } from 'seemly'
@@ -54,7 +55,7 @@ export const transferProps = {
     default: undefined
   },
   virtualScroll: Boolean,
-  sourceTitle: String,
+  sourceTitle: [String, Function] as PropType<string | (() => VNodeChild)>,
   selectAllText: String,
   clearText: String,
   targetTitle: String,

diff --git a/src/transfer/src/TransferHeader.tsx b/src/transfer/src/TransferHeader.tsx
@@ -1,4 +1,4 @@
-import { h, defineComponent, inject, type PropType } from 'vue'
+import { h, defineComponent, inject, type PropType, type VNodeChild } 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 {
@@ -42,7 +42,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 && (