From 0af59b4e8da989770b97222fc344e7e6005961d2 Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Mon, 23 Mar 2020 19:47:09 +0800
Subject: [PATCH 1/2] fixed: transfer bug

---
 .../components/transfer/zhCN/basic.md         |  41 ++--
 src/Transfer/src/Transfer.vue                 | 204 +++++++++++++-----
 2 files changed, 172 insertions(+), 73 deletions(-)

diff --git a/demo/documentation/components/transfer/zhCN/basic.md b/demo/documentation/components/transfer/zhCN/basic.md
index 193886141..34dda8eee 100644
--- a/demo/documentation/components/transfer/zhCN/basic.md
+++ b/demo/documentation/components/transfer/zhCN/basic.md
@@ -1,31 +1,38 @@
 # 基础用法
+
 穿梭框的基础用法。如果你有一大堆数据，看下一个例子。
+
 ```html
-<n-transfer
-  ref="transfer"
-  v-model="value"
-  :options="options"
-/>
+<n-transfer ref="transfer" v-model="value" :options="options" />
 ```
+
 ```js
-function createOptions () {
-  return Array.apply(null, { length: 100 }).map((v, i) => ({
-    label: 'Option' + i,
+function createOptions() {
+  return Array.apply(null, { length: 10 }).map((v, i) => ({
+    label: "Option" + i,
     value: i,
     disabled: i % 5 === 0
-  }))
+  }));
 }
 
-function createValues () {
-  return Array.apply(null, { length: 50 }).map((v, i) => i)
+function createValues() {
+  return Array.apply(null, { length: 5 }).map((v, i) => i);
 }
 
 export default {
-  data () {
+  data() {
     return {
-      options: createOptions(),
-      value: createValues()
-    }
+      options: [],
+      value: []
+    };
   },
-}
-```
\ No newline at end of file
+  created() {
+    setTimeout(() => {
+      this.options = createOptions();
+    }, 3000);
+    setTimeout(() => {
+      this.value = createValues();
+    }, 5000);
+  }
+};
+```
diff --git a/src/Transfer/src/Transfer.vue b/src/Transfer/src/Transfer.vue
index 7bcd6ff5d..692d6b67a 100644
--- a/src/Transfer/src/Transfer.vue
+++ b/src/Transfer/src/Transfer.vue
@@ -10,7 +10,11 @@
     <div class="n-transfer-list">
       <div class="n-transfer-list-header">
         <div class="n-transfer-list-header__checkbox">
-          <n-transfer-header-checkbox :source="true" :theme="syntheticTheme" @change="handleSourceHeaderCheckboxChange" />
+          <n-transfer-header-checkbox
+            :source="true"
+            :theme="syntheticTheme"
+            @change="handleSourceHeaderCheckboxChange"
+          />
         </div>
         <div class="n-transfer-list-header__header">
           {{ sourceTitle || localeNamespace.sourceTitle }}
@@ -22,7 +26,12 @@
         @mouseleave="handleSourceListMouseLeave"
       >
         <div v-if="filterable" class="n-transfer-filter">
-          <n-input v-model="sourcePattern" clearable size="small" :placeholder="targetFilterPlaceholder">
+          <n-input
+            v-model="sourcePattern"
+            clearable
+            size="small"
+            :placeholder="targetFilterPlaceholder"
+          >
             <template v-slot:suffix>
               <n-icon :size="16">
                 <ios-search />
@@ -47,7 +56,11 @@
                 key-field="value"
               >
                 <template v-slot:before>
-                  <n-base-tracking-rect ref="sourceLightBar" :item-size="itemSize" :theme="syntheticTheme" />
+                  <n-base-tracking-rect
+                    ref="sourceLightBar"
+                    :item-size="itemSize"
+                    :theme="syntheticTheme"
+                  />
                 </template>
                 <template v-slot="{ item: option, index }">
                   <n-transfer-source-list-item
@@ -65,7 +78,11 @@
             </n-scrollbar>
             <n-scrollbar v-else :theme="syntheticTheme">
               <div ref="sourceList" class="n-transfer-list-content">
-                <n-base-tracking-rect ref="sourceLightBar" :item-size="itemSize" :theme="syntheticTheme" />
+                <n-base-tracking-rect
+                  ref="sourceLightBar"
+                  :item-size="itemSize"
+                  :theme="syntheticTheme"
+                />
                 <n-transfer-source-list-item
                   v-for="option in filteredSourceOptions"
                   ref="sourceListItems"
@@ -88,19 +105,16 @@
       <div class="n-transfer-list__border-mask" />
     </div>
     <div class="n-transfer-gap">
-      <n-transfer-button
-        :to="true"
-        @click="handleToTargetClick"
-      />
-      <n-transfer-button
-        :to="false"
-        @click="handleToSourceClick"
-      />
+      <n-transfer-button :to="true" @click="handleToTargetClick" />
+      <n-transfer-button :to="false" @click="handleToSourceClick" />
     </div>
     <div class="n-transfer-list">
       <div class="n-transfer-list-header">
         <div class="n-transfer-list-header__checkbox">
-          <n-transfer-header-checkbox :theme="syntheticTheme" @change="handleTargetHeaderCheckboxChange" />
+          <n-transfer-header-checkbox
+            :theme="syntheticTheme"
+            @change="handleTargetHeaderCheckboxChange"
+          />
         </div>
         <div class="n-transfer-list-header__header">
           {{ targetTitle || localeNamespace.targetTitle }}
@@ -112,7 +126,12 @@
         @mouseleave="handleTargetListMouseLeave"
       >
         <div v-if="filterable" class="n-transfer-filter">
-          <n-input v-model="targetPattern" clearable size="small" :placeholder="targetFilterPlaceholder">
+          <n-input
+            v-model="targetPattern"
+            clearable
+            size="small"
+            :placeholder="targetFilterPlaceholder"
+          >
             <template v-slot:suffix>
               <n-icon :size="16">
                 <ios-search />
@@ -137,7 +156,11 @@
                 key-field="value"
               >
                 <template v-slot:before>
-                  <n-base-tracking-rect ref="targetLightBar" :item-size="itemSize" :theme="syntheticTheme" />
+                  <n-base-tracking-rect
+                    ref="targetLightBar"
+                    :item-size="itemSize"
+                    :theme="syntheticTheme"
+                  />
                 </template>
                 <template v-slot="{ item: option, index }">
                   <n-transfer-target-list-item
@@ -155,7 +178,11 @@
             </n-scrollbar>
             <n-scrollbar v-else :theme="syntheticTheme">
               <div ref="targetList" class="n-transfer-list-content">
-                <n-base-tracking-rect ref="targetLightBar" :item-size="itemSize" :theme="syntheticTheme" />
+                <n-base-tracking-rect
+                  ref="targetLightBar"
+                  :item-size="itemSize"
+                  :theme="syntheticTheme"
+                />
                 <n-transfer-target-list-item
                   v-for="(option, index) in filteredTargetOptions"
                   ref="targetListItems"
@@ -263,7 +290,9 @@ export default {
       type: Function,
       default: (pattern, option, from) => {
         if (!pattern) return true
-        return ~('' + option.label).toLowerCase().indexOf(('' + pattern).toLowerCase())
+        return ~('' + option.label)
+          .toLowerCase()
+          .indexOf(('' + pattern).toLowerCase())
       }
     },
     size: {
@@ -309,37 +338,33 @@ export default {
     },
     sourceScrollContainer () {
       if (this.virtualScroll) {
-        return () => (
+        return () =>
           this.$refs.sourceVirtualScroller &&
           this.$refs.sourceVirtualScroller.$el
-        )
       }
       return null
     },
     sourceScrollContent () {
       if (this.virtualScroll) {
-        return () => (
+        return () =>
           this.$refs.sourceVirtualScroller &&
           this.$refs.sourceVirtualScroller.$refs.wrapper
-        )
       }
       return null
     },
     targetScrollContainer () {
       if (this.virtualScroll) {
-        return () => (
+        return () =>
           this.$refs.targetVirtualScroller &&
           this.$refs.targetVirtualScroller.$el
-        )
       }
       return null
     },
     targetScrollContent () {
       if (this.virtualScroll) {
-        return () => (
+        return () =>
           this.$refs.targetVirtualScroller &&
           this.$refs.targetVirtualScroller.$refs.wrapper
-        )
       }
       return null
     },
@@ -356,24 +381,41 @@ export default {
       return this.disabled || this.mergedDisabledStatus.target
     },
     sourceHeaderCheckboxChecked () {
-      return this.sourceCheckedValues.length === this.memorizedSourceOptions.length && !!this.memorizedSourceOptions.length
+      return (
+        this.sourceCheckedValues.length ===
+          this.memorizedSourceOptions.length &&
+        !!this.memorizedSourceOptions.length
+      )
     },
     targetHeaderCheckboxChecked () {
-      return this.targetCheckedValues.length === this.targetOptions.length && !!this.targetOptions.length
+      return (
+        this.targetCheckedValues.length === this.targetOptions.length &&
+        !!this.targetOptions.length
+      )
     },
     sourceHeaderCheckboxIndeterminate () {
-      return this.sourceCheckedValues.length !== 0 && this.sourceCheckedValues.length < this.memorizedSourceOptions.length
+      return (
+        this.sourceCheckedValues.length !== 0 &&
+        this.sourceCheckedValues.length < this.memorizedSourceOptions.length
+      )
     },
     targetHeaderCheckboxIndeterminate () {
-      return this.targetCheckedValues.length !== 0 && this.targetCheckedValues.length < this.targetOptions.length
+      return (
+        this.targetCheckedValues.length !== 0 &&
+        this.targetCheckedValues.length < this.targetOptions.length
+      )
     },
     sourceCheckedValueSet () {
       const valueToOptionMap = this.valueToOptionMap
-      return new Set(this.sourceCheckedValues.filter(value => valueToOptionMap.has(value)))
+      return new Set(
+        this.sourceCheckedValues.filter(value => valueToOptionMap.has(value))
+      )
     },
     targetCheckedValueSet () {
       const valueToOptionMap = this.valueToOptionMap
-      return new Set(this.targetCheckedValues.filter(value => valueToOptionMap.has(value)))
+      return new Set(
+        this.targetCheckedValues.filter(value => valueToOptionMap.has(value))
+      )
     },
     sourceValueSet () {
       return this.mergedValueSet.sourceValueSet
@@ -413,7 +455,9 @@ export default {
       const sourcePattern = this.sourcePattern
       if (!sourcePattern.length) return this.memorizedSourceOptions
       const filter = this.filter
-      return this.memorizedSourceOptions.filter(option => filter(sourcePattern, option, 'source'))
+      return this.memorizedSourceOptions.filter(option =>
+        filter(sourcePattern, option, 'source')
+      )
     },
     filteredTargetOptions () {
       const filterable = this.filterable
@@ -421,19 +465,23 @@ export default {
       const targetPattern = this.targetPattern
       if (!targetPattern.length) return this.targetOptions
       const filter = this.filter
-      return this.targetOptions.filter(option => filter(targetPattern, option, 'target'))
+      return this.targetOptions.filter(option =>
+        filter(targetPattern, option, 'target')
+      )
     }
   },
   watch: {
     options () {
       this.initialized = false
-      const valueSet = this.valueSet
-      this.memorizedSourceOptions = this.options.filter(option => !valueSet.has(option.value))
+      this.initMemorizedSourceOptions()
       this.sourceCheckedValues = []
       this.targetCheckedValues = []
       this.$nextTick().then(() => {
         this.initialized = true
       })
+    },
+    value () {
+      this.initMemorizedSourceOptions()
     }
   },
   mounted () {
@@ -442,9 +490,17 @@ export default {
   },
   created () {
     const valueSet = this.valueSet
-    this.memorizedSourceOptions = this.options.filter(option => !valueSet.has(option.value))
+    this.memorizedSourceOptions = this.options.filter(
+      option => !valueSet.has(option.value)
+    )
   },
   methods: {
+    initMemorizedSourceOptions () {
+      const valueSet = this.valueSet
+      this.memorizedSourceOptions = this.options.filter(
+        option => !valueSet.has(option.value)
+      )
+    },
     emitChangeEvent (value) {
       const newValue = this.cleanValue(value)
       this.$emit('change', newValue)
@@ -456,20 +512,28 @@ export default {
       } else return null
     },
     clearSourceCheck () {
-      const sourceValueSet = new Set(this.filteredSourceOptions.map(option => option.value))
-      this.sourceCheckedValues = this.sourceCheckedValues.filter(value => !sourceValueSet.has(value))
+      const sourceValueSet = new Set(
+        this.filteredSourceOptions.map(option => option.value)
+      )
+      this.sourceCheckedValues = this.sourceCheckedValues.filter(
+        value => !sourceValueSet.has(value)
+      )
     },
     handleSourceHeaderCheckboxChange (value) {
       if (this.sourceHeaderCheckboxIndeterminate) {
         if (!this.virtualScroll) {
-          (this.$refs.sourceListItems || []).forEach(listItem => listItem.setChecked(false))
+          ;(this.$refs.sourceListItems || []).forEach(listItem =>
+            listItem.setChecked(false)
+          )
         }
         this.clearSourceCheck()
         return
       }
       if (value) {
         if (!this.virtualScroll) {
-          (this.$refs.sourceListItems || []).forEach(listItem => listItem.setChecked(true))
+          ;(this.$refs.sourceListItems || []).forEach(listItem =>
+            listItem.setChecked(true)
+          )
         }
         const newValues = this.filteredSourceOptions
           .filter(option => !option.disabled)
@@ -478,26 +542,36 @@ export default {
         this.sourceCheckedValues = Array.from(new Set(newValues))
       } else {
         if (!this.virtualScroll) {
-          (this.$refs.sourceListItems || []).forEach(listItem => listItem.setChecked(false))
+          ;(this.$refs.sourceListItems || []).forEach(listItem =>
+            listItem.setChecked(false)
+          )
         }
         this.clearSourceCheck()
       }
     },
     clearTargetCheck () {
-      const targetValueSet = new Set(this.filteredTargetOptions.map(option => option.value))
-      this.targetCheckedValues = this.targetCheckedValues.filter(value => !targetValueSet.has(value))
+      const targetValueSet = new Set(
+        this.filteredTargetOptions.map(option => option.value)
+      )
+      this.targetCheckedValues = this.targetCheckedValues.filter(
+        value => !targetValueSet.has(value)
+      )
     },
     handleTargetHeaderCheckboxChange (value) {
       if (this.targetHeaderCheckboxIndeterminate) {
         if (!this.virtualScroll) {
-          (this.$refs.targetListItems || []).forEach(listItem => listItem.setChecked(false))
+          ;(this.$refs.targetListItems || []).forEach(listItem =>
+            listItem.setChecked(false)
+          )
         }
         this.clearTargetCheck()
         return
       }
       if (value) {
         if (!this.virtualScroll) {
-          (this.$refs.targetListItems || []).forEach(listItem => listItem.setChecked(true))
+          ;(this.$refs.targetListItems || []).forEach(listItem =>
+            listItem.setChecked(true)
+          )
         }
         const newValues = this.filteredTargetOptions
           .filter(option => !option.disabled)
@@ -506,7 +580,9 @@ export default {
         this.targetCheckedValues = Array.from(new Set(newValues))
       } else {
         if (!this.virtualScroll) {
-          (this.$refs.targetListItems || []).forEach(listItem => listItem.setChecked(false))
+          ;(this.$refs.targetListItems || []).forEach(listItem =>
+            listItem.setChecked(false)
+          )
         }
         this.clearTargetCheck()
       }
@@ -535,8 +611,9 @@ export default {
       let nextValue = Array.isArray(this.value) ? this.value : []
       nextValue = this.sourceCheckedValues.concat(nextValue)
       const sourceCheckedValueSet = this.sourceCheckedValueSet
-      this.memorizedSourceOptions = this.memorizedSourceOptions
-        .filter(option => !sourceCheckedValueSet.has(option.value))
+      this.memorizedSourceOptions = this.memorizedSourceOptions.filter(
+        option => !sourceCheckedValueSet.has(option.value)
+      )
       this.$emit('change', nextValue)
       this.sourceCheckedValues = []
     },
@@ -546,7 +623,9 @@ export default {
         return
       }
       this.enableTargetEnterAnimation = true
-      const enteredItemEls = Array.from(this.$el.getElementsByClassName('n-transfer-list-item--enter'))
+      const enteredItemEls = Array.from(
+        this.$el.getElementsByClassName('n-transfer-list-item--enter')
+      )
       const length = enteredItemEls.length
       for (let i = 0; i < length; ++i) {
         enteredItemEls[i].classList.remove('n-transfer-list-item--enter')
@@ -556,7 +635,8 @@ export default {
       let newValue = Array.isArray(this.value) ? this.value : []
       newValue = sourceCheckedValues.concat(newValue)
       /** create new source length */
-      this.nextSourceOptionsLength = this.memorizedSourceOptions.length - sourceCheckedValues.length
+      this.nextSourceOptionsLength =
+        this.memorizedSourceOptions.length - sourceCheckedValues.length
       /** play source leave animation */
       const sourceCheckedValueSet = this.sourceCheckedValueSet
       this.$refs.sourceListItems.forEach(listItem => {
@@ -566,7 +646,9 @@ export default {
       })
       window.setTimeout(() => {
         /** after animation is done change memorized source options to remove dom */
-        this.memorizedSourceOptions = this.memorizedSourceOptions.filter(option => !sourceCheckedValueSet.has(option.value))
+        this.memorizedSourceOptions = this.memorizedSourceOptions.filter(
+          option => !sourceCheckedValueSet.has(option.value)
+        )
         this.nextSourceOptionsLength = null
         this.enableTargetEnterAnimation = false
       }, 500)
@@ -581,8 +663,12 @@ export default {
       const targetValueSet = this.targetCheckedValueSet
       newValue = newValue.filter(value => !targetValueSet.has(value))
       const valueToOptionMap = this.valueToOptionMap
-      const newSourceOptions = this.targetCheckedValues.map(value => valueToOptionMap.get(value))
-      this.memorizedSourceOptions = newSourceOptions.concat(this.memorizedSourceOptions)
+      const newSourceOptions = this.targetCheckedValues.map(value =>
+        valueToOptionMap.get(value)
+      )
+      this.memorizedSourceOptions = newSourceOptions.concat(
+        this.memorizedSourceOptions
+      )
       this.$emit('change', newValue)
       this.targetCheckedValues = []
     },
@@ -592,7 +678,9 @@ export default {
         return
       }
       this.enableSourceEnterAnimation = true
-      const enteredItemEls = Array.from(this.$el.getElementsByClassName('n-transfer-list-item--enter'))
+      const enteredItemEls = Array.from(
+        this.$el.getElementsByClassName('n-transfer-list-item--enter')
+      )
       const length = enteredItemEls.length
       for (let i = 0; i < length; ++i) {
         enteredItemEls[i].classList.remove('n-transfer-list-item--enter')
@@ -620,8 +708,12 @@ export default {
       }, 500)
       /** change memorized source options */
       const valueToOptionMap = this.valueToOptionMap
-      const newSourceOptions = this.targetCheckedValues.map(value => valueToOptionMap.get(value))
-      this.memorizedSourceOptions = newSourceOptions.concat(this.memorizedSourceOptions)
+      const newSourceOptions = this.targetCheckedValues.map(value =>
+        valueToOptionMap.get(value)
+      )
+      this.memorizedSourceOptions = newSourceOptions.concat(
+        this.memorizedSourceOptions
+      )
       /** clear check */
       this.targetCheckedValues = []
     },

From 99624b7b8528e7f11996ec9e0a8e177c72800ef7 Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Mon, 23 Mar 2020 20:11:10 +0800
Subject: [PATCH 2/2] fixed(transfer): fixed bug when value update later than
 options

---
 .../components/transfer/zhCN/basic.md         |  41 ++--
 src/Transfer/src/Transfer.vue                 | 193 +++++-------------
 2 files changed, 72 insertions(+), 162 deletions(-)

diff --git a/demo/documentation/components/transfer/zhCN/basic.md b/demo/documentation/components/transfer/zhCN/basic.md
index 34dda8eee..193886141 100644
--- a/demo/documentation/components/transfer/zhCN/basic.md
+++ b/demo/documentation/components/transfer/zhCN/basic.md
@@ -1,38 +1,31 @@
 # 基础用法
-
 穿梭框的基础用法。如果你有一大堆数据，看下一个例子。
-
 ```html
-<n-transfer ref="transfer" v-model="value" :options="options" />
+<n-transfer
+  ref="transfer"
+  v-model="value"
+  :options="options"
+/>
 ```
-
 ```js
-function createOptions() {
-  return Array.apply(null, { length: 10 }).map((v, i) => ({
-    label: "Option" + i,
+function createOptions () {
+  return Array.apply(null, { length: 100 }).map((v, i) => ({
+    label: 'Option' + i,
     value: i,
     disabled: i % 5 === 0
-  }));
+  }))
 }
 
-function createValues() {
-  return Array.apply(null, { length: 5 }).map((v, i) => i);
+function createValues () {
+  return Array.apply(null, { length: 50 }).map((v, i) => i)
 }
 
 export default {
-  data() {
+  data () {
     return {
-      options: [],
-      value: []
-    };
+      options: createOptions(),
+      value: createValues()
+    }
   },
-  created() {
-    setTimeout(() => {
-      this.options = createOptions();
-    }, 3000);
-    setTimeout(() => {
-      this.value = createValues();
-    }, 5000);
-  }
-};
-```
+}
+```
\ No newline at end of file
diff --git a/src/Transfer/src/Transfer.vue b/src/Transfer/src/Transfer.vue
index 692d6b67a..6521bb8b6 100644
--- a/src/Transfer/src/Transfer.vue
+++ b/src/Transfer/src/Transfer.vue
@@ -10,11 +10,7 @@
     <div class="n-transfer-list">
       <div class="n-transfer-list-header">
         <div class="n-transfer-list-header__checkbox">
-          <n-transfer-header-checkbox
-            :source="true"
-            :theme="syntheticTheme"
-            @change="handleSourceHeaderCheckboxChange"
-          />
+          <n-transfer-header-checkbox :source="true" :theme="syntheticTheme" @change="handleSourceHeaderCheckboxChange" />
         </div>
         <div class="n-transfer-list-header__header">
           {{ sourceTitle || localeNamespace.sourceTitle }}
@@ -26,12 +22,7 @@
         @mouseleave="handleSourceListMouseLeave"
       >
         <div v-if="filterable" class="n-transfer-filter">
-          <n-input
-            v-model="sourcePattern"
-            clearable
-            size="small"
-            :placeholder="targetFilterPlaceholder"
-          >
+          <n-input v-model="sourcePattern" clearable size="small" :placeholder="targetFilterPlaceholder">
             <template v-slot:suffix>
               <n-icon :size="16">
                 <ios-search />
@@ -56,11 +47,7 @@
                 key-field="value"
               >
                 <template v-slot:before>
-                  <n-base-tracking-rect
-                    ref="sourceLightBar"
-                    :item-size="itemSize"
-                    :theme="syntheticTheme"
-                  />
+                  <n-base-tracking-rect ref="sourceLightBar" :item-size="itemSize" :theme="syntheticTheme" />
                 </template>
                 <template v-slot="{ item: option, index }">
                   <n-transfer-source-list-item
@@ -78,11 +65,7 @@
             </n-scrollbar>
             <n-scrollbar v-else :theme="syntheticTheme">
               <div ref="sourceList" class="n-transfer-list-content">
-                <n-base-tracking-rect
-                  ref="sourceLightBar"
-                  :item-size="itemSize"
-                  :theme="syntheticTheme"
-                />
+                <n-base-tracking-rect ref="sourceLightBar" :item-size="itemSize" :theme="syntheticTheme" />
                 <n-transfer-source-list-item
                   v-for="option in filteredSourceOptions"
                   ref="sourceListItems"
@@ -105,16 +88,19 @@
       <div class="n-transfer-list__border-mask" />
     </div>
     <div class="n-transfer-gap">
-      <n-transfer-button :to="true" @click="handleToTargetClick" />
-      <n-transfer-button :to="false" @click="handleToSourceClick" />
+      <n-transfer-button
+        :to="true"
+        @click="handleToTargetClick"
+      />
+      <n-transfer-button
+        :to="false"
+        @click="handleToSourceClick"
+      />
     </div>
     <div class="n-transfer-list">
       <div class="n-transfer-list-header">
         <div class="n-transfer-list-header__checkbox">
-          <n-transfer-header-checkbox
-            :theme="syntheticTheme"
-            @change="handleTargetHeaderCheckboxChange"
-          />
+          <n-transfer-header-checkbox :theme="syntheticTheme" @change="handleTargetHeaderCheckboxChange" />
         </div>
         <div class="n-transfer-list-header__header">
           {{ targetTitle || localeNamespace.targetTitle }}
@@ -126,12 +112,7 @@
         @mouseleave="handleTargetListMouseLeave"
       >
         <div v-if="filterable" class="n-transfer-filter">
-          <n-input
-            v-model="targetPattern"
-            clearable
-            size="small"
-            :placeholder="targetFilterPlaceholder"
-          >
+          <n-input v-model="targetPattern" clearable size="small" :placeholder="targetFilterPlaceholder">
             <template v-slot:suffix>
               <n-icon :size="16">
                 <ios-search />
@@ -156,11 +137,7 @@
                 key-field="value"
               >
                 <template v-slot:before>
-                  <n-base-tracking-rect
-                    ref="targetLightBar"
-                    :item-size="itemSize"
-                    :theme="syntheticTheme"
-                  />
+                  <n-base-tracking-rect ref="targetLightBar" :item-size="itemSize" :theme="syntheticTheme" />
                 </template>
                 <template v-slot="{ item: option, index }">
                   <n-transfer-target-list-item
@@ -178,11 +155,7 @@
             </n-scrollbar>
             <n-scrollbar v-else :theme="syntheticTheme">
               <div ref="targetList" class="n-transfer-list-content">
-                <n-base-tracking-rect
-                  ref="targetLightBar"
-                  :item-size="itemSize"
-                  :theme="syntheticTheme"
-                />
+                <n-base-tracking-rect ref="targetLightBar" :item-size="itemSize" :theme="syntheticTheme" />
                 <n-transfer-target-list-item
                   v-for="(option, index) in filteredTargetOptions"
                   ref="targetListItems"
@@ -290,9 +263,7 @@ export default {
       type: Function,
       default: (pattern, option, from) => {
         if (!pattern) return true
-        return ~('' + option.label)
-          .toLowerCase()
-          .indexOf(('' + pattern).toLowerCase())
+        return ~('' + option.label).toLowerCase().indexOf(('' + pattern).toLowerCase())
       }
     },
     size: {
@@ -338,33 +309,37 @@ export default {
     },
     sourceScrollContainer () {
       if (this.virtualScroll) {
-        return () =>
+        return () => (
           this.$refs.sourceVirtualScroller &&
           this.$refs.sourceVirtualScroller.$el
+        )
       }
       return null
     },
     sourceScrollContent () {
       if (this.virtualScroll) {
-        return () =>
+        return () => (
           this.$refs.sourceVirtualScroller &&
           this.$refs.sourceVirtualScroller.$refs.wrapper
+        )
       }
       return null
     },
     targetScrollContainer () {
       if (this.virtualScroll) {
-        return () =>
+        return () => (
           this.$refs.targetVirtualScroller &&
           this.$refs.targetVirtualScroller.$el
+        )
       }
       return null
     },
     targetScrollContent () {
       if (this.virtualScroll) {
-        return () =>
+        return () => (
           this.$refs.targetVirtualScroller &&
           this.$refs.targetVirtualScroller.$refs.wrapper
+        )
       }
       return null
     },
@@ -381,41 +356,24 @@ export default {
       return this.disabled || this.mergedDisabledStatus.target
     },
     sourceHeaderCheckboxChecked () {
-      return (
-        this.sourceCheckedValues.length ===
-          this.memorizedSourceOptions.length &&
-        !!this.memorizedSourceOptions.length
-      )
+      return this.sourceCheckedValues.length === this.memorizedSourceOptions.length && !!this.memorizedSourceOptions.length
     },
     targetHeaderCheckboxChecked () {
-      return (
-        this.targetCheckedValues.length === this.targetOptions.length &&
-        !!this.targetOptions.length
-      )
+      return this.targetCheckedValues.length === this.targetOptions.length && !!this.targetOptions.length
     },
     sourceHeaderCheckboxIndeterminate () {
-      return (
-        this.sourceCheckedValues.length !== 0 &&
-        this.sourceCheckedValues.length < this.memorizedSourceOptions.length
-      )
+      return this.sourceCheckedValues.length !== 0 && this.sourceCheckedValues.length < this.memorizedSourceOptions.length
     },
     targetHeaderCheckboxIndeterminate () {
-      return (
-        this.targetCheckedValues.length !== 0 &&
-        this.targetCheckedValues.length < this.targetOptions.length
-      )
+      return this.targetCheckedValues.length !== 0 && this.targetCheckedValues.length < this.targetOptions.length
     },
     sourceCheckedValueSet () {
       const valueToOptionMap = this.valueToOptionMap
-      return new Set(
-        this.sourceCheckedValues.filter(value => valueToOptionMap.has(value))
-      )
+      return new Set(this.sourceCheckedValues.filter(value => valueToOptionMap.has(value)))
     },
     targetCheckedValueSet () {
       const valueToOptionMap = this.valueToOptionMap
-      return new Set(
-        this.targetCheckedValues.filter(value => valueToOptionMap.has(value))
-      )
+      return new Set(this.targetCheckedValues.filter(value => valueToOptionMap.has(value)))
     },
     sourceValueSet () {
       return this.mergedValueSet.sourceValueSet
@@ -455,9 +413,7 @@ export default {
       const sourcePattern = this.sourcePattern
       if (!sourcePattern.length) return this.memorizedSourceOptions
       const filter = this.filter
-      return this.memorizedSourceOptions.filter(option =>
-        filter(sourcePattern, option, 'source')
-      )
+      return this.memorizedSourceOptions.filter(option => filter(sourcePattern, option, 'source'))
     },
     filteredTargetOptions () {
       const filterable = this.filterable
@@ -465,9 +421,7 @@ export default {
       const targetPattern = this.targetPattern
       if (!targetPattern.length) return this.targetOptions
       const filter = this.filter
-      return this.targetOptions.filter(option =>
-        filter(targetPattern, option, 'target')
-      )
+      return this.targetOptions.filter(option => filter(targetPattern, option, 'target'))
     }
   },
   watch: {
@@ -490,9 +444,7 @@ export default {
   },
   created () {
     const valueSet = this.valueSet
-    this.memorizedSourceOptions = this.options.filter(
-      option => !valueSet.has(option.value)
-    )
+    this.memorizedSourceOptions = this.options.filter(option => !valueSet.has(option.value))
   },
   methods: {
     initMemorizedSourceOptions () {
@@ -512,28 +464,20 @@ export default {
       } else return null
     },
     clearSourceCheck () {
-      const sourceValueSet = new Set(
-        this.filteredSourceOptions.map(option => option.value)
-      )
-      this.sourceCheckedValues = this.sourceCheckedValues.filter(
-        value => !sourceValueSet.has(value)
-      )
+      const sourceValueSet = new Set(this.filteredSourceOptions.map(option => option.value))
+      this.sourceCheckedValues = this.sourceCheckedValues.filter(value => !sourceValueSet.has(value))
     },
     handleSourceHeaderCheckboxChange (value) {
       if (this.sourceHeaderCheckboxIndeterminate) {
         if (!this.virtualScroll) {
-          ;(this.$refs.sourceListItems || []).forEach(listItem =>
-            listItem.setChecked(false)
-          )
+          (this.$refs.sourceListItems || []).forEach(listItem => listItem.setChecked(false))
         }
         this.clearSourceCheck()
         return
       }
       if (value) {
         if (!this.virtualScroll) {
-          ;(this.$refs.sourceListItems || []).forEach(listItem =>
-            listItem.setChecked(true)
-          )
+          (this.$refs.sourceListItems || []).forEach(listItem => listItem.setChecked(true))
         }
         const newValues = this.filteredSourceOptions
           .filter(option => !option.disabled)
@@ -542,36 +486,26 @@ export default {
         this.sourceCheckedValues = Array.from(new Set(newValues))
       } else {
         if (!this.virtualScroll) {
-          ;(this.$refs.sourceListItems || []).forEach(listItem =>
-            listItem.setChecked(false)
-          )
+          (this.$refs.sourceListItems || []).forEach(listItem => listItem.setChecked(false))
         }
         this.clearSourceCheck()
       }
     },
     clearTargetCheck () {
-      const targetValueSet = new Set(
-        this.filteredTargetOptions.map(option => option.value)
-      )
-      this.targetCheckedValues = this.targetCheckedValues.filter(
-        value => !targetValueSet.has(value)
-      )
+      const targetValueSet = new Set(this.filteredTargetOptions.map(option => option.value))
+      this.targetCheckedValues = this.targetCheckedValues.filter(value => !targetValueSet.has(value))
     },
     handleTargetHeaderCheckboxChange (value) {
       if (this.targetHeaderCheckboxIndeterminate) {
         if (!this.virtualScroll) {
-          ;(this.$refs.targetListItems || []).forEach(listItem =>
-            listItem.setChecked(false)
-          )
+          (this.$refs.targetListItems || []).forEach(listItem => listItem.setChecked(false))
         }
         this.clearTargetCheck()
         return
       }
       if (value) {
         if (!this.virtualScroll) {
-          ;(this.$refs.targetListItems || []).forEach(listItem =>
-            listItem.setChecked(true)
-          )
+          (this.$refs.targetListItems || []).forEach(listItem => listItem.setChecked(true))
         }
         const newValues = this.filteredTargetOptions
           .filter(option => !option.disabled)
@@ -580,9 +514,7 @@ export default {
         this.targetCheckedValues = Array.from(new Set(newValues))
       } else {
         if (!this.virtualScroll) {
-          ;(this.$refs.targetListItems || []).forEach(listItem =>
-            listItem.setChecked(false)
-          )
+          (this.$refs.targetListItems || []).forEach(listItem => listItem.setChecked(false))
         }
         this.clearTargetCheck()
       }
@@ -611,9 +543,8 @@ export default {
       let nextValue = Array.isArray(this.value) ? this.value : []
       nextValue = this.sourceCheckedValues.concat(nextValue)
       const sourceCheckedValueSet = this.sourceCheckedValueSet
-      this.memorizedSourceOptions = this.memorizedSourceOptions.filter(
-        option => !sourceCheckedValueSet.has(option.value)
-      )
+      this.memorizedSourceOptions = this.memorizedSourceOptions
+        .filter(option => !sourceCheckedValueSet.has(option.value))
       this.$emit('change', nextValue)
       this.sourceCheckedValues = []
     },
@@ -623,9 +554,7 @@ export default {
         return
       }
       this.enableTargetEnterAnimation = true
-      const enteredItemEls = Array.from(
-        this.$el.getElementsByClassName('n-transfer-list-item--enter')
-      )
+      const enteredItemEls = Array.from(this.$el.getElementsByClassName('n-transfer-list-item--enter'))
       const length = enteredItemEls.length
       for (let i = 0; i < length; ++i) {
         enteredItemEls[i].classList.remove('n-transfer-list-item--enter')
@@ -635,8 +564,7 @@ export default {
       let newValue = Array.isArray(this.value) ? this.value : []
       newValue = sourceCheckedValues.concat(newValue)
       /** create new source length */
-      this.nextSourceOptionsLength =
-        this.memorizedSourceOptions.length - sourceCheckedValues.length
+      this.nextSourceOptionsLength = this.memorizedSourceOptions.length - sourceCheckedValues.length
       /** play source leave animation */
       const sourceCheckedValueSet = this.sourceCheckedValueSet
       this.$refs.sourceListItems.forEach(listItem => {
@@ -646,9 +574,7 @@ export default {
       })
       window.setTimeout(() => {
         /** after animation is done change memorized source options to remove dom */
-        this.memorizedSourceOptions = this.memorizedSourceOptions.filter(
-          option => !sourceCheckedValueSet.has(option.value)
-        )
+        this.memorizedSourceOptions = this.memorizedSourceOptions.filter(option => !sourceCheckedValueSet.has(option.value))
         this.nextSourceOptionsLength = null
         this.enableTargetEnterAnimation = false
       }, 500)
@@ -663,12 +589,8 @@ export default {
       const targetValueSet = this.targetCheckedValueSet
       newValue = newValue.filter(value => !targetValueSet.has(value))
       const valueToOptionMap = this.valueToOptionMap
-      const newSourceOptions = this.targetCheckedValues.map(value =>
-        valueToOptionMap.get(value)
-      )
-      this.memorizedSourceOptions = newSourceOptions.concat(
-        this.memorizedSourceOptions
-      )
+      const newSourceOptions = this.targetCheckedValues.map(value => valueToOptionMap.get(value))
+      this.memorizedSourceOptions = newSourceOptions.concat(this.memorizedSourceOptions)
       this.$emit('change', newValue)
       this.targetCheckedValues = []
     },
@@ -678,9 +600,7 @@ export default {
         return
       }
       this.enableSourceEnterAnimation = true
-      const enteredItemEls = Array.from(
-        this.$el.getElementsByClassName('n-transfer-list-item--enter')
-      )
+      const enteredItemEls = Array.from(this.$el.getElementsByClassName('n-transfer-list-item--enter'))
       const length = enteredItemEls.length
       for (let i = 0; i < length; ++i) {
         enteredItemEls[i].classList.remove('n-transfer-list-item--enter')
@@ -708,12 +628,8 @@ export default {
       }, 500)
       /** change memorized source options */
       const valueToOptionMap = this.valueToOptionMap
-      const newSourceOptions = this.targetCheckedValues.map(value =>
-        valueToOptionMap.get(value)
-      )
-      this.memorizedSourceOptions = newSourceOptions.concat(
-        this.memorizedSourceOptions
-      )
+      const newSourceOptions = this.targetCheckedValues.map(value => valueToOptionMap.get(value))
+      this.memorizedSourceOptions = newSourceOptions.concat(this.memorizedSourceOptions)
       /** clear check */
       this.targetCheckedValues = []
     },
@@ -753,3 +669,4 @@ export default {
   }
 }
 </script>
+