doc(transfer): docs & selectedKeys (#4717)

* refactor(transfer): docs & selectedKeys

* docs: update snapshot

Author: ajuner

components/transfer/__tests__/__snapshots__/demo.test.js.snap

@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 2
+order: 3
 title:
   zh-CN: 高级用法
   en-US: Advanced
@@ -18,19 +18,34 @@ You can customize the labels of the transfer buttons, the width and height of th
 
 <template>
   <a-transfer
+    v-model:target-keys="targetKeys"
     :data-source="mockData"
     show-search
     :list-style="{
       width: '250px',
       height: '300px',
     }"
     :operations="['to right', 'to left']"
-    :target-keys="targetKeys"
     :render="item => `${item.title}-${item.description}`"
     @change="handleChange"
   >
-    <template #footer>
-      <a-button size="small" style="float: right; margin: 5px" @click="getMock">reload</a-button>
+    <template #footer="{ direction }">
+      <a-button
+        v-if="direction === 'left'"
+        size="small"
+        style="float: left; margin: 5px"
+        @click="getMock"
+      >
+        left reload
+      </a-button>
+      <a-button
+        v-else-if="direction === 'right'"
+        size="small"
+        style="float: right; margin: 5px"
+        @click="getMock"
+      >
+        right reload
+      </a-button>
     </template>
     <template #notFoundContent>
       <span>没数据</span>
@@ -72,7 +87,6 @@ export default defineComponent({
       targetKeys.value = keys;
     };
     const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
-      targetKeys.value = keys;
       console.log(keys, direction, moveKeys);
     };
     return {

components/transfer/demo/advanced.vue

@@ -19,10 +19,10 @@ The most basic usage of `Transfer` involves providing the source data and target
 <template>
   <div>
     <a-transfer
+      v-model:target-keys="targetKeys"
+      v-model:selected-keys="selectedKeys"
       :data-source="mockData"
       :titles="['Source', 'Target']"
-      :target-keys="targetKeys"
-      :selected-keys="selectedKeys"
       :render="item => item.title"
       :disabled="disabled"
       @change="handleChange"
@@ -65,13 +65,11 @@ export default defineComponent({
     const selectedKeys = ref<string[]>(['1', '4']);
 
     const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
-      targetKeys.value = nextTargetKeys;
       console.log('targetKeys: ', nextTargetKeys);
       console.log('direction: ', direction);
       console.log('moveKeys: ', moveKeys);
     };
     const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
-      selectedKeys.value = [...sourceSelectedKeys, ...targetSelectedKeys];
       console.log('sourceSelectedKeys: ', sourceSelectedKeys);
       console.log('targetSelectedKeys: ', targetSelectedKeys);
     };

components/transfer/demo/basic.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 3
+order: 4
 title:
   zh-CN: 自定义渲染行数据
   en-US: Custom datasource
@@ -18,12 +18,12 @@ Custom each Transfer Item, and in this way you can render a complex datasource.
 
 <template>
   <a-transfer
+    v-model:target-keys="targetKeys"
     :data-source="mockData"
     :list-style="{
       width: '300px',
       height: '300px',
     }"
-    :target-keys="targetKeys"
     @change="handleChange"
   >
     <template #render="item">
@@ -66,7 +66,6 @@ export default defineComponent({
       targetKeys.value = keys;
     };
     const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
-      targetKeys.value = keys;
       console.log(keys, direction, moveKeys);
     };
     return {

components/transfer/demo/custom-item.vue

@@ -1,20 +1,24 @@
 <template>
   <demo-sort :cols="1">
     <basic />
+    <oneway />
     <search />
     <advanced />
     <custom-item />
+    <pagination />
     <table-transfer />
     <tree-transfer />
   </demo-sort>
 </template>
 <script lang="ts">
 import Basic from './basic.vue';
+import Oneway from './oneway.vue';
 import Search from './search.vue';
 import Advanced from './advanced.vue';
 import CustomItem from './custom-item.vue';
 import TableTransfer from './table-transfer.vue';
 import TreeTransfer from './tree-transfer.vue';
+import Pagination from './pagination.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -24,9 +28,11 @@ export default defineComponent({
   US,
   components: {
     Basic,
+    Oneway,
     Search,
     Advanced,
     CustomItem,
+    Pagination,
     TableTransfer,
     TreeTransfer,
   },

components/transfer/demo/index.vue

@@ -0,0 +1,92 @@
+<docs>
+---
+order: 1
+title:
+  zh-CN: 单向样式
+  en-US: One Way
+---
+
+## zh-CN
+
+通过 `oneWay` 将 Transfer 转为单向样式。
+
+## en-US
+
+Use `oneWay` to makes Transfer to one way style.
+
+</docs>
+
+<template>
+  <div>
+    <a-transfer
+      v-model:target-keys="targetKeys"
+      v-model:selected-keys="selectedKeys"
+      :data-source="mockData"
+      :one-way="true"
+      :titles="['Source', 'Target']"
+      :render="item => item.title"
+      :disabled="disabled"
+      @change="handleChange"
+      @selectChange="handleSelectChange"
+      @scroll="handleScroll"
+    />
+    <a-switch
+      v-model:checked="disabled"
+      un-checked-children="enabled"
+      checked-children="disabled"
+      style="margin-top: 16px"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+interface MockData {
+  key: string;
+  title: string;
+  description: string;
+  disabled: boolean;
+}
+const mockData: MockData[] = [];
+for (let i = 0; i < 20; i++) {
+  mockData.push({
+    key: i.toString(),
+    title: `content${i + 1}`,
+    description: `description of content${i + 1}`,
+    disabled: i % 3 < 1,
+  });
+}
+
+export default defineComponent({
+  data() {
+    const disabled = ref<boolean>(false);
+
+    const targetKeys = ref<string[]>([]);
+
+    const selectedKeys = ref<string[]>(['1', '4']);
+
+    const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
+      console.log('targetKeys: ', nextTargetKeys);
+      console.log('direction: ', direction);
+      console.log('moveKeys: ', moveKeys);
+    };
+    const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
+      console.log('sourceSelectedKeys: ', sourceSelectedKeys);
+      console.log('targetSelectedKeys: ', targetSelectedKeys);
+    };
+    const handleScroll = (direction: string, e: Event) => {
+      console.log('direction:', direction);
+      console.log('target:', e.target);
+    };
+
+    return {
+      mockData,
+      targetKeys,
+      selectedKeys,
+      disabled,
+      handleChange,
+      handleSelectChange,
+      handleScroll,
+    };
+  },
+});
+</script>

components/transfer/demo/oneway.vue

@@ -0,0 +1,74 @@
+<docs>
+---
+order: 5
+title:
+  zh-CN: 分页
+  en-US: Pagination
+---
+
+## zh-CN
+
+大数据下使用分页。
+
+## en-US
+
+large count of items with pagination.
+
+</docs>
+
+<template>
+  <div>
+    <a-transfer
+      v-model:target-keys="targetKeys"
+      :data-source="mockData"
+      :render="item => item.title"
+      :disabled="disabled"
+      pagination
+      @change="handleChange"
+    />
+    <a-switch
+      v-model:checked="disabled"
+      un-checked-children="enabled"
+      checked-children="disabled"
+      style="margin-top: 16px"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+interface MockData {
+  key: string;
+  title: string;
+  description: string;
+}
+const mockData: MockData[] = [];
+for (let i = 0; i < 200; i++) {
+  mockData.push({
+    key: i.toString(),
+    title: `content${i + 1}`,
+    description: `description of content${i + 1}`,
+  });
+}
+
+const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
+export default defineComponent({
+  data() {
+    const disabled = ref<boolean>(false);
+
+    const targetKeys = ref<string[]>(oriTargetKeys);
+
+    const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
+      console.log('targetKeys: ', nextTargetKeys);
+      console.log('direction: ', direction);
+      console.log('moveKeys: ', moveKeys);
+    };
+
+    return {
+      mockData,
+      targetKeys,
+      disabled,
+      handleChange,
+    };
+  },
+});
+</script>

components/transfer/demo/pagination.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 1
+order: 2
 title:
   zh-CN: 带搜索框
   en-US: Search
@@ -18,10 +18,10 @@ Transfer with a search box.
 
 <template>
   <a-transfer
+    v-model:target-keys="targetKeys"
     :data-source="mockData"
     show-search
     :filter-option="filterOption"
-    :target-keys="targetKeys"
     :render="item => item.title"
     @change="handleChange"
     @search="handleSearch"
@@ -66,7 +66,6 @@ export default defineComponent({
     };
     const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
       console.log(keys, direction, moveKeys);
-      targetKeys.value = keys;
     };
 
     const handleSearch = (dir: string, value: string) => {

components/transfer/demo/search.vue

@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 4
+order: 6
 title:
   zh-CN: 表格穿梭框
   en-US: Table Transfer
@@ -19,8 +19,8 @@ Customize render list with Table component.
 <template>
   <div>
     <a-transfer
+      v-model:target-keys="targetKeys"
       :data-source="mockData"
-      :target-keys="targetKeys"
       :disabled="disabled"
       :show-search="showSearch"
       :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
@@ -76,7 +76,6 @@ Customize render list with Table component.
   </div>
 </template>
 <script lang="ts">
-import { difference } from 'lodash-es';
 import { defineComponent, ref } from 'vue';
 interface MockData {
   key: string;
@@ -86,7 +85,7 @@ interface MockData {
 }
 type tableColumn = Record<string, string>;
 const mockData: MockData[] = [];
-for (let i = 0; i < 20; i++) {
+for (let i = 0; i < 10; i++) {
   mockData.push({
     key: i.toString(),
     title: `content${i + 1}`,
@@ -123,7 +122,7 @@ export default defineComponent({
     const rightColumns = ref<tableColumn[]>(rightTableColumns);
 
     const onChange = (nextTargetKeys: string[]) => {
-      targetKeys.value = nextTargetKeys;
+      console.log('nextTargetKeys', nextTargetKeys);
     };
 
     const getRowSelection = ({
@@ -140,10 +139,7 @@ export default defineComponent({
           const treeSelectedKeys = selectedRows
             .filter(item => !item.disabled)
             .map(({ key }) => key);
-          const diffKeys = selected
-            ? difference(treeSelectedKeys, selectedKeys)
-            : difference(selectedKeys, treeSelectedKeys);
-          onItemSelectAll(diffKeys, selected);
+          onItemSelectAll(treeSelectedKeys, selected);
         },
         onSelect({ key }: Record<string, string>, selected: boolean) {
           onItemSelect(key, selected);