加入grp-transfer组件，升级到2.15.7686

build/bin/build-entry.js

@@ -71,7 +71,7 @@ var listTemplate = [];
 
 ComponentNames.forEach(name => {
   var componentName = uppercamelcase(name);
-
+  console.log('[componentName] :' + componentName);
   includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
     name: componentName,
     package: name

components.json

@@ -63,6 +63,7 @@
   "cascader": "./packages/cascader/index.js",
   "color-picker": "./packages/color-picker/index.js",
   "transfer": "./packages/transfer/index.js",
+  "grp-transfer": "./packages/grp-transfer/index.js",
   "container": "./packages/container/index.js",
   "header": "./packages/header/index.js",
   "aside": "./packages/aside/index.js",

examples/docs/zh-CN/transfer.md

@@ -4,7 +4,7 @@
 :::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。
 ```html
 <template>
-  <el-transfer-grp v-model="value" :data="data"></el-transfer-grp>
+  <el-grp-transfer v-model="value" :data="data"></el-grp-transfer>
 </template>
 
 <script>

examples/versions.json

-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.7683":"2.15"}
\ No newline at end of file
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.7686":"2.15"}
\ No newline at end of file

package.json

 {
   "name": "element-ui",
-  "version": "2.15.7683",
+  "version": "2.15.7686",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

packages/grp-transfer/index.js

-import TransferGrp from './src/main';
+import GrpTransfer from './src/main';
 
 /* istanbul ignore next */
-TransferGrp.install = function(Vue) {
-  Vue.component(TransferGrp.name, TransferGrp);
+GrpTransfer.install = function(Vue) {
+  Vue.component(GrpTransfer.name, GrpTransfer);
 };
 
-export default TransferGrp;
+export default GrpTransfer;

packages/grp-transfer/src/main.vue

@@ -47,7 +47,7 @@ import TransferPanel from './transfer-panel.vue';
 import Migrating from 'element-ui/src/mixins/migrating';
 
 export default {
-  name: 'ElTransferGrp',
+  name: 'ElGrpTransfer',
 
   mixins: [Emitter, Locale, Migrating],
 
@@ -203,14 +203,12 @@ export default {
       let oldIndex = this.value.indexOf(currentItem[this.props.key]);
       let newIndex = oldIndex - 1;
       this.value.splice(newIndex, 0, this.value.splice(oldIndex, 1)[0]);
-      console.log(this.value);
     },
     moveDown() {
       let currentItem = this.$refs.rightPanel.getCurrentItem();
       let oldIndex = this.value.indexOf(currentItem[this.props.key]);
       let newIndex = oldIndex + 1;
       this.value.splice(newIndex, 0, this.value.splice(oldIndex, 1)[0]);
-      console.log(this.value);
     },
     addToLeft() {
       let currentValue = this.value.slice();

packages/grp-transfer/src/transfer-panel.vue

@@ -41,9 +41,9 @@ import Locale from 'element-ui/src/mixins/locale';
 export default {
   mixins: [Locale],
 
-  name: 'ElTransferPanel',
+  name: 'ElGrpTransferPanel',
 
-  componentName: 'ElTransferPanel',
+  componentName: 'ElGrpTransferPanel',
 
   components: {
     ElCheckboxGroup,
@@ -55,7 +55,7 @@ export default {
       },
       render(h) {
         const getParent = vm => {
-          if (vm.$options.componentName === 'ElTransferPanel') {
+          if (vm.$options.componentName === 'ElGrpTransferPanel') {
             return vm;
           } else if (vm.$parent) {
             return getParent(vm.$parent);

packages/theme-chalk/src/grp-transfer.scss

+@use "sass:math";
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "input";
+@import "button";
+@import "checkbox";
+@import "checkbox-group";
+
+@include b(transfer) {
+  font-size: $--font-size-base;
+
+  @include e(buttons) {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 30px;
+  }
+
+  @include e(button) {
+    display: block;
+    margin: 0 auto;
+    padding: 10px;
+    border-radius: 50%;
+    color: $--color-white;
+    background-color: $--color-primary;
+    font-size: 0;
+
+    @include when(with-texts) {
+      border-radius: $--border-radius-base;
+    }
+
+    @include when(disabled) {
+      border: $--border-base;
+      background-color: $--background-color-base;
+      color: $--color-text-placeholder;
+
+      &:hover {
+        border: $--border-base;
+        background-color: $--background-color-base;
+        color: $--color-text-placeholder;
+      }
+    }
+
+    &:first-child {
+      margin-bottom: 10px;
+    }
+
+    &:nth-child(2) {
+      margin: 0;
+    }
+
+    i, span {
+      font-size: 14px;
+    }
+
+    & [class*="el-icon-"] + span {
+      margin-left: 0;
+    }
+  }
+}
+
+@include b(transfer-panel) {
+  border: 1px solid $--transfer-border-color;
+  border-radius: $--transfer-border-radius;
+  overflow: hidden;
+  background: $--color-white;
+  display: inline-block;
+  vertical-align: middle;
+  width: $--transfer-panel-width;
+  max-height: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  @include e(body) {
+    height: $--transfer-panel-body-height;
+
+    @include when(with-footer) {
+      padding-bottom: $--transfer-panel-footer-height;
+    }
+  }
+
+  @include e(list) {
+    margin: 0;
+    padding: 6px 0;
+    list-style: none;
+    height: $--transfer-panel-body-height;
+    overflow: auto;
+    box-sizing: border-box;
+
+    @include when(filterable) {
+      height: #{$--transfer-panel-body-height - $--transfer-filter-height - 20px};
+      padding-top: 0;
+    }
+  }
+
+  @include e(item) {
+    height: $--transfer-item-height;
+    line-height: $--transfer-item-height;
+    padding-left: 15px;
+    display: block !important;
+
+    & + .el-transfer-panel__item {
+      margin-left: 0;
+    }
+
+    &.el-checkbox {
+      color: $--color-text-regular;
+    }
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    &.el-checkbox .el-checkbox__label {
+      width: 100%;
+      @include utils-ellipsis;
+      display: block;
+      box-sizing: border-box;
+      padding-left: 24px;
+      line-height: $--transfer-item-height;
+    }
+
+    .el-checkbox__input {
+      position: absolute;
+      top: 8px;
+    }
+  }
+
+  @include e(filter) {
+    text-align: center;
+    margin: 15px;
+    box-sizing: border-box;
+    display: block;
+    width: auto;
+
+    .el-input__inner {
+      height: $--transfer-filter-height;
+      width: 100%;
+      font-size: 12px;
+      display: inline-block;
+      box-sizing: border-box;
+      border-radius: #{math.div($--transfer-filter-height, 2)};
+      padding-right: 10px;
+      padding-left: 30px;
+    }
+
+    .el-input__icon {
+      margin-left: 5px;
+    }
+
+    .el-icon-circle-close {
+      cursor: pointer;
+    }
+  }
+
+  .el-transfer-panel__header {
+    height: $--transfer-panel-header-height;
+    line-height: $--transfer-panel-header-height;
+    background: $--transfer-panel-header-background-color;
+    margin: 0;
+    padding-left: 15px;
+    border-bottom: 1px solid $--transfer-border-color;
+    box-sizing: border-box;
+    color: $--color-black;
+
+    .el-checkbox {
+      display: block;
+      line-height: 40px;
+
+      .el-checkbox__label {
+        font-size: 16px;
+        color: $--color-text-primary;
+        font-weight: normal;
+
+        span {
+          position: absolute;
+          right: 15px;
+          color: $--color-text-secondary;
+          font-size: 12px;
+          font-weight: normal;
+        }
+      }
+    }
+  }
+
+  .el-transfer-panel__footer {
+    height: $--transfer-panel-footer-height;
+    background: $--color-white;
+    margin: 0;
+    padding: 0;
+    border-top: 1px solid $--transfer-border-color;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: $--index-normal;
+    @include utils-vertical-center;
+
+    .el-checkbox {
+      padding-left: 20px;
+      color: $--color-text-regular;
+    }
+  }
+
+  .el-transfer-panel__empty {
+    margin: 0;
+    height: $--transfer-item-height;
+    line-height: $--transfer-item-height;
+    padding: 6px 15px 0;
+    color: $--color-text-secondary;
+    text-align: center;
+  }
+
+  .el-checkbox__label {
+    padding-left: 8px;
+  }
+
+  .el-checkbox__inner {
+    height: 14px;
+    width: 14px;
+    border-radius: 3px;
+    &::after {
+      height: 6px;
+      width: 3px;
+      left: 4px;
+    }
+  }
+}

packages/theme-chalk/src/index.scss

@@ -60,6 +60,7 @@
 @import "./cascader.scss";
 @import "./color-picker.scss";
 @import "./transfer.scss";
+@import "./grp-transfer.scss";
 @import "./container.scss";
 @import "./header.scss";
 @import "./aside.scss";

src/index.js

@@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.7684',
+  version: '2.15.7686',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -281,6 +281,7 @@ export default {
   Cascader,
   ColorPicker,
   Transfer,
+  GrpTransfer,
   Container,
   Header,
   Aside,