tusen-ai · 07akioni · Aug 18, 2022 · Aug 4, 2022 · Aug 15, 2022 · 07akioni
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -2,6 +2,10 @@
 
 ## NEXT_VERSION
 
+### Breaking Changes
+
+- `n-transfer`'s `filterable` prop will be obsolete, please use `source-filterable` and `target-filterable` props.
+
 ### Fixes
 
 - Fix `n-menu` extra not working in submenu, closes [#3390](https://github.com/TuSimple/naive-ui/issues/3390).
@@ -35,6 +39,8 @@
 - `n-pagination` adds `trigger-quick-jump-on` prop, closes [#3387](https://github.com/TuSimple/naive-ui/issues/3387).
 - `n-pagination` adds `simple` prop.
 - `n-cascader` adds `arrow` slot, closes [#3459](https://github.com/TuSimple/naive-ui/issues/3459).
+- `n-transfer` adds `source-filterable` prop, closes [#3407](https://github.com/TuSimple/naive-ui/issues/3407).
+- `n-transfer` adds `target-filterable` prop, closes [#3407](https://github.com/TuSimple/naive-ui/issues/3407).
 - `n-list` supports RTL.
 - `n-drawer` supports RTL.
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -2,6 +2,10 @@
 
 ## NEXT_VERSION
 
+### Breaking Changes
+
+- `n-transfer` 的 `filterable` 属性将会废弃，请使用 `source-filterable` 和 `target-filterable` 属性
+
 ### Fixes
 
 - 修复 `n-menu` extra 在 submenu 中无效，关闭 [#3390](https://github.com/TuSimple/naive-ui/issues/3390)
@@ -34,6 +38,8 @@
 - `n-pagination` 新增 `trigger-quick-jump-on` 属性，关闭 [#3387](https://github.com/TuSimple/naive-ui/issues/3387)
 - `n-pagination` 新增 `simple` 属性
 - `n-cascader` 新增 `arrow` 插槽，关闭 [#3459](https://github.com/TuSimple/naive-ui/issues/3459)
+- `n-transfer` 新增 `source-filterable` 属性，关闭 [#3407](https://github.com/TuSimple/naive-ui/issues/3407)
+- `n-transfer` 新增 `target-filterable` 属性，关闭 [#3407](https://github.com/TuSimple/naive-ui/issues/3407)
 - `n-list` 支持 RTL
 - `n-drawer` 支持 RTL
 

diff --git a/src/transfer/demos/enUS/filterable.demo.vue b/src/transfer/demos/enUS/filterable.demo.vue
@@ -3,13 +3,22 @@
 </markdown>
 
 <template>
-  <n-transfer
-    ref="transfer"
-    v-model:value="value"
-    virtual-scroll
-    :options="options"
-    filterable
-  />
+  <n-space vertical>
+    <n-transfer
+      ref="transfer"
+      v-model:value="value1"
+      virtual-scroll
+      :options="options1"
+      source-filterable
+    />
+    <n-transfer
+      ref="transfer"
+      v-model:value="value2"
+      virtual-scroll
+      :options="options2"
+      target-filterable
+    />
+  </n-space>
 </template>
 
 <script lang="ts">
@@ -30,8 +39,10 @@ function createValues () {
 export default defineComponent({
   setup () {
     return {
-      options: createOptions(),
-      value: ref(createValues())
+      options1: createOptions(),
+      value1: ref(createValues()),
+      options2: createOptions(),
+      value2: ref(createValues())
     }
   }
 })

diff --git a/src/transfer/demos/enUS/index.demo-entry.md b/src/transfer/demos/enUS/index.demo-entry.md
@@ -22,8 +22,10 @@ render-source-list.vue
 | --- | --- | --- | --- | --- |
 | default-value | `Array<string \| number> \| null` | `null` | Default value. | 2.32.0 |
 | disabled | `boolean` | `true` | Disabled state. | 2.32.0 |
-| filterable | `boolean` | `false` | Filterable state. | 2.32.0 |
-| filter | `(pattern: string, option: TransferOption) => boolean` | A basic label string match function. | 2.32.0 |
+| filterable | `boolean` | `false` | Filterable state (control source only, will be obsolete). | 2.32.0 |
+| source-filterable | `boolean` | `false` | The source filterable state. | NEXT_VERSION |
+| target-filterable | `boolean` | `false` | The target filterable state. | NEXT_VERSION |
+| filter | `(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean` | A basic label string match function. | 2.32.0, `from` NEXT_VERSION |
 | options | `TransferOption[]` | `[]` | For configuration options, see the TransferOption Type below. | 2.32.0 |
 | render-source-label | `(props: { option: TransferOption }) => VNodeChild` | `undefined` | Customize source label rendering. | 2.32.0 |
 | render-target-label | `(props: { option: TransferOption }) => VNodeChild` | `undefined` | Customize target label rendering. | 2.32.0 |

diff --git a/src/transfer/demos/zhCN/filterable.demo.vue b/src/transfer/demos/zhCN/filterable.demo.vue
@@ -3,13 +3,22 @@
 </markdown>
 
 <template>
-  <n-transfer
-    ref="transfer"
-    v-model:value="value"
-    virtual-scroll
-    :options="options"
-    filterable
-  />
+  <n-space vertical>
+    <n-transfer
+      ref="transfer"
+      v-model:value="value1"
+      virtual-scroll
+      :options="options1"
+      source-filterable
+    />
+    <n-transfer
+      ref="transfer"
+      v-model:value="value2"
+      virtual-scroll
+      :options="options2"
+      target-filterable
+    />
+  </n-space>
 </template>
 
 <script lang="ts">
@@ -30,8 +39,10 @@ function createValues () {
 export default defineComponent({
   setup () {
     return {
-      options: createOptions(),
-      value: ref(createValues())
+      options1: createOptions(),
+      value1: ref(createValues()),
+      options2: createOptions(),
+      value2: ref(createValues())
     }
   }
 })

diff --git a/src/transfer/demos/zhCN/index.demo-entry.md b/src/transfer/demos/zhCN/index.demo-entry.md
@@ -23,8 +23,10 @@ asynchronous-options-debug.vue
 | --- | --- | --- | --- | --- |
 | default-value | `Array<string \| number> \| null` | `null` | 非受控模式下的默认值 | 2.32.0 |
 | disabled | `boolean` | `true` | 是否禁用 | 2.32.0 |
-| filterable | `boolean` | `false` | 是否可过滤 | 2.32.0 |
-| filter | `(pattern: string, option: TransferOption) => boolean` | 一个简单的标签字符串匹配函数 | 搜索时使用的过滤函数 | 2.32.0 |
+| filterable | `boolean` | `false` | 是否可过滤（只控制源项，将要废弃） | 2.32.0 |
+| source-filterable | `boolean` | `false` | 源项是否可过滤 | NEXT_VERSION |
+| target-filterable | `boolean` | `false` | 目标项是否可过滤 | NEXT_VERSION |
+| filter | `(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean` | 一个简单的标签字符串匹配函数 | 搜索时使用的过滤函数 | 2.32.0，`from` NEXT_VERSION |
 | options | `TransferOption[]` | `[]` | 配置选项内容，详情见 TransferOption Type | 2.32.0 |
 | render-source-label | `(props: { from: 'source' \| 'target', option: TransferOption }) => VNodeChild` | `undefined` | 自定义源标签 | 2.32.0 |
 | render-target-label | `(props: { from: 'source' \| 'target', option: TransferOption }) => VNodeChild` | `undefined` | 自定义目标标签 | 2.32.0 |

diff --git a/src/transfer/src/Transfer.tsx b/src/transfer/src/Transfer.tsx
@@ -53,6 +53,8 @@ export const transferProps = {
   sourceTitle: String,
   targetTitle: String,
   filterable: Boolean,
+  sourceFilterable: Boolean,
+  targetFilterable: Boolean,
   sourceFilterPlaceholder: String,
   targetFilterPlaceholder: String,
   filter: {
@@ -111,15 +113,20 @@ export default defineComponent({
       uncontrolledValueRef,
       mergedValueRef,
       targetValueSetRef,
-      valueSetForSelectAllRef,
+      valueForSelectAllRef,
       valueSetForUnselectAllRef,
-      targetOptionsRef,
+      valueForClearRef,
+      filteredTgtOptionsRef,
       filteredSrcOptionsRef,
+      targetOptionsRef,
       canNotSelectAnythingRef,
       canBeClearedRef,
       allCheckedRef,
       srcPatternRef,
-      handleSrcFilterUpdateValue
+      tgtPatternRef,
+      mergedSrcFilterableRef,
+      handleSrcFilterUpdateValue,
+      handleTgtFilterUpdateValue
     } = useTransferData(props)
     function doUpdateValue (value: OptionValue[]): void {
       const {
@@ -136,12 +143,23 @@ export default defineComponent({
       nTriggerFormChange()
     }
 
-    function handleClearAll (): void {
-      doUpdateValue([...valueSetForUnselectAllRef.value])
+    function handleCheckedAll (): void {
+      doUpdateValue([
+        ...targetOptionsRef.value.map((i) => i.value),
+        ...valueForSelectAllRef.value
+      ])
     }
 
-    function handleCheckedAll (): void {
-      doUpdateValue([...valueSetForSelectAllRef.value])
+    function handleUnCheckedAll (): void {
+      doUpdateValue(
+        targetOptionsRef.value
+          .filter((i) => !valueSetForUnselectAllRef.value.has(i.value))
+          .map((i) => i.value)
+      )
+    }
+
+    function handleClearAll (): void {
+      doUpdateValue([...valueForClearRef.value])
     }
 
     function handleItemCheck (checked: boolean, optionValue: OptionValue): void {
@@ -179,11 +197,15 @@ export default defineComponent({
       isMounted: useIsMounted(),
       mergedTheme: themeRef,
       filteredSrcOpts: filteredSrcOptionsRef,
-      tgtOpts: targetOptionsRef,
+      filteredTgtOpts: filteredTgtOptionsRef,
       srcPattern: srcPatternRef,
+      tgtPattern: tgtPatternRef,
       mergedSize: mergedSizeRef,
+      mergedSrcFilterable: mergedSrcFilterableRef,
       handleSrcFilterUpdateValue,
+      handleTgtFilterUpdateValue,
       handleCheckedAll,
+      handleUnCheckedAll,
       handleClearAll,
       handleItemCheck,
       handleChecked,
@@ -249,13 +271,18 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix, renderSourceList, mergedTheme } = this
+    const {
+      mergedClsPrefix,
+      renderSourceList,
+      mergedTheme,
+      mergedSrcFilterable,
+      targetFilterable
+    } = this
     return (
       <div
         class={[
           `${mergedClsPrefix}-transfer`,
-          this.mergedDisabled && `${mergedClsPrefix}-transfer--disabled`,
-          this.filterable && `${mergedClsPrefix}-transfer--filterable`
+          this.mergedDisabled && `${mergedClsPrefix}-transfer--disabled`
         ]}
         style={this.cssVars as CSSProperties}
       >
@@ -266,11 +293,11 @@ export default defineComponent({
             source
             title={this.sourceTitle}
             onCheckedAll={this.handleCheckedAll}
-            onClearAll={this.handleClearAll}
+            onClearAll={this.handleUnCheckedAll}
             size={this.mergedSize}
           />
           <div class={`${mergedClsPrefix}-transfer-list-body`}>
-            {this.filterable ? (
+            {mergedSrcFilterable ? (
               <NTransferFilter
                 onUpdateValue={this.handleSrcFilterUpdateValue}
                 value={this.srcPattern}
@@ -288,7 +315,7 @@ export default defineComponent({
                     default: () =>
                       renderSourceList({
                         onCheck: this.handleChecked,
-                        checkedOptions: this.tgtOpts,
+                        checkedOptions: this.filteredTgtOpts,
                         pattern: this.srcPattern
                       })
                   }}
@@ -315,9 +342,17 @@ export default defineComponent({
             title={this.targetTitle}
           />
           <div class={`${mergedClsPrefix}-transfer-list-body`}>
+            {targetFilterable ? (
+              <NTransferFilter
+                onUpdateValue={this.handleTgtFilterUpdateValue}
+                value={this.tgtPattern}
+                disabled={this.mergedDisabled}
+                placeholder={this.sourceFilterPlaceholder}
+              />
+            ) : null}
             <div class={`${mergedClsPrefix}-transfer-list-flex-container`}>
               <NTransferList
-                options={this.tgtOpts}
+                options={this.filteredTgtOpts}
                 disabled={this.mergedDisabled}
                 virtualScroll={this.virtualScroll}
                 itemSize={this.itemSize}

diff --git a/src/transfer/src/interface.ts b/src/transfer/src/interface.ts
@@ -10,7 +10,11 @@ export interface Option {
   disabled?: boolean
 }
 
-export type Filter = (pattern: string, option: Option) => boolean
+export type Filter = (
+  pattern: string,
+  option: Option,
+  from: 'source' | 'target'
+) => boolean
 
 export interface RenderLabelProps {
   option: Option