Transfer: add left-check-change and right-check-change (#10156)

examples/docs/en-US/transfer.md

@@ -288,3 +288,5 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys |
+| left-check-change | triggers when end user changes the checked state of any data item in the left list | key array of currently checked items, key array of items whose checked state have changed |
+| right-check-change | triggers when end user changes the checked state of any data item in the right list | key array of currently checked items, key array of items whose checked state have changed |

examples/docs/es/transfer.md

@@ -289,4 +289,5 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 | Nombre | Descripcion                              | Parametros                               |
 | ------ | ---------------------------------------- | ---------------------------------------- |
 | change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
-
+| left-check-change | triggers when end user changes the checked state of any data item in the left list | key array of currently checked items, key array of items whose checked state have changed |
+| right-check-change | triggers when end user changes the checked state of any data item in the right list | key array of currently checked items, key array of items whose checked state have changed |

examples/docs/zh-CN/transfer.md

@@ -285,3 +285,5 @@
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change | 右侧列表元素变化时触发 | 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组 |
+| left-check-change | 左侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |
+| right-check-change | 右侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |

packages/transfer/src/main.vue

@@ -167,12 +167,16 @@
         };
       },
 
-      onSourceCheckedChange(val) {
+      onSourceCheckedChange(val, movedKeys) {
         this.leftChecked = val;
+        if (movedKeys === undefined) return;
+        this.$emit('left-check-change', val, movedKeys);
       },
 
-      onTargetCheckedChange(val) {
+      onTargetCheckedChange(val, movedKeys) {
         this.rightChecked = val;
+        if (movedKeys === undefined) return;
+        this.$emit('right-check-change', val, movedKeys);
       },
 
       addToLeft() {

packages/transfer/src/transfer-panel.vue

@@ -112,14 +112,22 @@
         checked: [],
         allChecked: false,
         query: '',
-        inputHover: false
+        inputHover: false,
+        checkChangeByUser: true
       };
     },
 
     watch: {
-      checked(val) {
+      checked(val, oldVal) {
         this.updateAllChecked();
-        this.$emit('checked-change', val);
+        if (this.checkChangeByUser) {
+          const movedKeys = val.concat(oldVal)
+            .filter(v => val.indexOf(v) === -1 || oldVal.indexOf(v) === -1);
+          this.$emit('checked-change', val, movedKeys);
+        } else {
+          this.$emit('checked-change', val);
+          this.checkChangeByUser = true;
+        }
       },
 
       data() {
@@ -130,6 +138,7 @@
             checked.push(item);
           }
         });
+        this.checkChangeByUser = false;
         this.checked = checked;
       },
 
@@ -149,6 +158,7 @@
               checked.push(item);
             }
           });
+          this.checkChangeByUser = false;
           this.checked = checked;
         }
       }