[release] 2.0.2

This allows to override transitions parameters (for example if you want them slower or faster) the same way you would tweak the primary/accent colors.

CHANGELOG.en-US.md

@@ -1,5 +1,18 @@
 ## Changelog
 
+### 2.0.2
+
+*2017-10-31*
+
+- Now right-clicking the buttons of InputNumber won't change its value, #7817
+- `validate` method of Form can now wait for asynchronous validations before executing its callback, #7774 (by @Allenice)
+- Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7838
+- Fixed missing preview and delete icons of Upload when its `list-type` is picture-card, #7857
+- Added `sort-by` attribute for TableColumn, #7828 (by @wangfengming)
+- Fixed DatePicker sometimes displaying wrong year number when selecting the first week in week mode, #7860 (by @hh23485)
+- Fixed icon style error of vertical Steps, #7891
+- The hot area for node arrows in Tree is expanded, #7891
+
 ### 2.0.1
 
 *2017-10-28*

CHANGELOG.zh-CN.md

@@ -1,5 +1,18 @@
 ## 更新日志
 
+### 2.0.2
+
+*2017-10-31*
+
+- 在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817
+- Form 的 `validate` 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）
+- 修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838
+- 修复 `list-type` 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857
+- 新增 TableColumn 的 `sort-by` 属性，#7828（by @wangfengming）
+- 修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）
+- 修复垂直模式的 Steps 中图标宽度的样式错误，#7891
+- 增大了 Tree 中展开箭头的点击热区，#7891
+
 ### 2.0.1
 
 *2017-10-28*

build/deploy-faas.sh

@@ -14,4 +14,5 @@ cp -rf ../../examples/element-ui/** $SUB_FOLDER/
 cd ../..
 
 # deploy domestic site
-faas deploy alpha
+faas deploy alpha
+rm -rf temp_web

examples/docs/en-US/form.md

@@ -5,15 +5,17 @@
         if (!value) {
           return callback(new Error('Please input the age'));
         }
-        if (!Number.isInteger(value)) {
-          callback(new Error('Please input digits'));
-        } else {
-          if (value < 18) {
-            callback(new Error('Age must be greater than 18'));
+        setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('Please input digits'));
           } else {
-            callback();
+            if (value < 18) {
+              callback(new Error('Age must be greater than 18'));
+            } else {
+              callback();
+            }
           }
-        }
+        }, 1000);
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {
@@ -338,7 +340,8 @@ When the vertical space is limited and the form is relatively simple, you can pu
       <el-option label="Zone one" value="shanghai"></el-option>
       <el-option label="Zone two" value="beijing"></el-option>
     </el-select>
-  </el-form-item><el-form-item>
+  </el-form-item>
+  <el-form-item>
     <el-button type="primary" @click="onSubmit">Query</el-button>
   </el-form-item>
 </el-form>
@@ -546,15 +549,17 @@ This example shows how to customize your own validation rules to finish a two-fa
         if (!value) {
           return callback(new Error('Please input the age'));
         }
-        if (!Number.isInteger(value)) {
-          callback(new Error('Please input digits'));
-        } else {
-          if (value < 18) {
-            callback(new Error('Age must be greater than 18'));
+        setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('Please input digits'));
           } else {
-            callback();
+            if (value < 18) {
+              callback(new Error('Age must be greater than 18'));
+            } else {
+              callback();
+            }
           }
-        }
+        }, 1000);
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {

examples/docs/en-US/table.md

@@ -1263,7 +1263,7 @@ You can also select multiple rows.
 
 Sort the data to find or compare data quickly.
 
-:::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. Set table attribute `default-sort` to determine default sort column and order. To apply your own sorting rules, use `sort-method`. If you need remote sorting from backend, set `sortable` to `custom`, and listen to the `sort-change` event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
+:::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. Set table attribute `default-sort` to determine default sort column and order. To apply your own sorting rules, use `sort-method` or `sort-by`. If you need remote sorting from backend, set `sortable` to `custom`, and listen to the `sort-change` event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
 ```html
 <template>
   <el-table
@@ -2010,6 +2010,7 @@ You can customize row index in `type=index` columns.
 | render-header | render function for table header of this column | Function(h, { column, $index }) | — | — |
 | sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean, string | true, false, custom | false |
 | sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | Function(a, b) | — | — |
+| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | Function(row, index)/String/Array | — | — |
 | resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
 | formatter | function that formats cell content | Function(row, column, cellValue) | — | — |
 | show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |

examples/docs/zh-CN/form.md

@@ -5,15 +5,17 @@
         if (!value) {
           return callback(new Error('年龄不能为空'));
         }
-        if (!Number.isInteger(value)) {
-          callback(new Error('请输入数字值'));
-        } else {
-          if (value < 18) {
-            callback(new Error('必须年满18岁'));
+        setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('请输入数字值'));
           } else {
-            callback();
+            if (value < 18) {
+              callback(new Error('必须年满18岁'));
+            } else {
+              callback();
+            }
           }
-        }
+        }, 1000);
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {
@@ -331,7 +333,8 @@
       <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
     </el-select>
-  </el-form-item><el-form-item>
+  </el-form-item>
+  <el-form-item>
     <el-button type="primary" @click="onSubmit">查询</el-button>
   </el-form-item>
 </el-form>
@@ -537,15 +540,17 @@
         if (!value) {
           return callback(new Error('年龄不能为空'));
         }
-        if (!Number.isInteger(value)) {
-          callback(new Error('请输入数字值'));
-        } else {
-          if (value < 18) {
-            callback(new Error('必须年满18岁'));
+        setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('请输入数字值'));
           } else {
-            callback();
+            if (value < 18) {
+              callback(new Error('必须年满18岁'));
+            } else {
+              callback();
+            }
           }
-        }
+        }, 1000);
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {

examples/docs/zh-CN/table.md

@@ -1303,7 +1303,7 @@
 
 对表格进行排序，可快速查找或对比数据。
 
-:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。可以通过 Table 的`default-sort`属性设置默认的排序列和排序顺序。可以使用`sort-method`使用自定义的排序规则。如果需要后端排序，需将`sortable`设置为`custom`，同时在 Table 上监听`sort-change`事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
+:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。可以通过 Table 的`default-sort`属性设置默认的排序列和排序顺序。可以使用`sort-method`或者`sort-by`使用自定义的排序规则。如果需要后端排序，需将`sortable`设置为`custom`，同时在 Table 上监听`sort-change`事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
 ```html
 <template>
   <el-table
@@ -2073,6 +2073,7 @@
 | render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
 | sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
 | sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(a, b) | — | — |
+| sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推。 | String/Array/Function(row, index) | — | — |
 | resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
 | formatter | 用来格式化内容 | Function(row, column, cellValue) | — | — |
 | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |

examples/versions.json

@@ -1 +1 @@
-{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.8":"1.4","2.0.1":"2.0"}
+{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.8":"1.4","2.0.2":"2.0"}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

packages/checkbox/src/checkbox-button.vue

@@ -165,9 +165,15 @@
         }
       },
       handleChange(ev) {
+        if (this.isLimitExceeded) return;
+        let value;
+        if (ev.target.checked) {
+          value = this.trueLabel === undefined ? true : this.trueLabel;
+        } else {
+          value = this.falseLabel === undefined ? false : this.falseLabel;
+        }
+        this.$emit('change', value, ev);
         this.$nextTick(() => {
-          if (this.isLimitExceeded) return;
-          this.$emit('change', this.model, ev);
           if (this._checkboxGroup) {
             this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
           }

packages/checkbox/src/checkbox-group.vue

@@ -42,7 +42,7 @@
 </script>
 
 <template>
-  <div class="el-checkbox-group" role="group"  aria-label="checkbox-group">
+  <div class="el-checkbox-group" role="group" aria-label="checkbox-group">
     <slot></slot>
   </div>
 </template>

packages/checkbox/src/checkbox.vue

@@ -176,9 +176,15 @@
         }
       },
       handleChange(ev) {
+        if (this.isLimitExceeded) return;
+        let value;
+        if (ev.target.checked) {
+          value = this.trueLabel === undefined ? true : this.trueLabel;
+        } else {
+          value = this.falseLabel === undefined ? false : this.falseLabel;
+        }
+        this.$emit('change', value, ev);
         this.$nextTick(() => {
-          if (this.isLimitExceeded) return;
-          this.$emit('change', this.model, ev);
           if (this.isGroup) {
             this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
           }

packages/date-picker/src/panel/date-range.vue

@@ -482,6 +482,12 @@
         this.onPick && this.onPick(val);
         this.maxDate = val.maxDate;
         this.minDate = val.minDate;
+
+        // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
+        setTimeout(() => {
+          this.maxDate = val.maxDate;
+          this.minDate = val.minDate;
+        }, 10);
         if (!close || this.showTime) return;
         this.handleConfirm();
       },

packages/date-picker/src/picker.vue

@@ -162,8 +162,14 @@ const TYPE_VALUE_RESOLVER_MAP = {
   },
   week: {
     formatter(value, format) {
-      let date = formatDate(value, format);
-      const week = getWeekNumber(value);
+      let week = getWeekNumber(value);
+      let month = value.getMonth();
+      const trueDate = new Date(value);
+      if (week === 1 && month === 11) {
+        trueDate.setHours(0, 0, 0, 0);
+        trueDate.setDate(trueDate.getDate() + 3 - (trueDate.getDay() + 6) % 7);
+      }
+      let date = formatDate(trueDate, format);
 
       date = /WW/.test(date)
             ? date.replace(/WW/, week < 10 ? '0' + week : week)

packages/form/src/form-item.vue

@@ -53,7 +53,10 @@
       label: String,
       labelWidth: String,
       prop: String,
-      required: Boolean,
+      required: {
+        type: Boolean,
+        default: undefined
+      },
       rules: [Object, Array],
       error: String,
       validateStatus: String,
@@ -165,7 +168,7 @@
       validate(trigger, callback = noop) {
         this.validateDisabled = false;
         var rules = this.getFilteredRule(trigger);
-        if ((!rules || rules.length === 0) && !this._props.hasOwnProperty('required')) {
+        if ((!rules || rules.length === 0) && this.required === undefined) {
           callback();
           return true;
         }
@@ -216,7 +219,7 @@
       getRules() {
         var formRules = this.form.rules;
         var selfRules = this.rules;
-        var requiredRule = this._props.hasOwnProperty('required') ? { required: !!this.required } : [];
+        var requiredRule = this.required !== undefined ? { required: !!this.required } : [];
 
         formRules = formRules ? formRules[this.prop] : [];
 
@@ -255,7 +258,7 @@
 
         let rules = this.getRules();
 
-        if (rules.length || this._props.hasOwnProperty('required')) {
+        if (rules.length || this.required !== undefined) {
           this.$on('el.form.blur', this.onFieldBlur);
           this.$on('el.form.change', this.onFieldChange);
         }

packages/form/src/form.vue

@@ -80,7 +80,19 @@
           console.warn('[Element Warn][Form]model is required for validate to work!');
           return;
         }
+
+        let promise;
+        // if no callback, return promise
+        if (typeof callback !== 'function' && window.Promise) {
+          promise = new window.Promise((resolve, reject) => {
+            callback = function(valid) {
+              valid ? resolve(valid) : reject(valid);
+            };
+          });
+        }
+
         let valid = true;
+        let count = 0;
         // 如果需要验证的fields为空，调用验证时立刻返回callback
         if (this.fields.length === 0 && callback) {
           callback(true);
@@ -90,13 +102,14 @@
             if (errors) {
               valid = false;
             }
+            if (typeof callback === 'function' && ++count === this.fields.length) {
+              callback(valid);
+            }
           });
         });
 
-        if (typeof callback === 'function') {
-          callback(valid);
-        } else if (window.Promise) {
-          return Promise[valid ? 'resolve' : 'reject'](valid); // eslint-disable-line
+        if (promise) {
+          return promise;
         }
       },
       validateField(prop, cb) {

packages/input-number/src/input-number.vue

@@ -208,6 +208,15 @@
         if (value === '') {
           return;
         }
+
+        if (value.indexOf('.') === (value.length - 1)) {
+          return;
+        }
+
+        if (value.indexOf('-') === (value.length - 1)) {
+          return;
+        }
+
         const newVal = Number(value);
         if (!isNaN(newVal)) {
           this.setCurrentValue(newVal);

packages/loading/src/directive.js

@@ -39,14 +39,11 @@ exports.install = Vue => {
       if (el.domVisible) {
         el.instance.$on('after-leave', _ => {
           el.domVisible = false;
-          if (binding.modifiers.fullscreen && el.originalOverflow !== 'hidden') {
-            document.body.style.overflow = el.originalOverflow;
-          }
-          if (binding.modifiers.fullscreen || binding.modifiers.body) {
-            document.body.style.position = el.originalPosition;
-          } else {
-            el.style.position = el.originalPosition;
-          }
+          const target = binding.modifiers.fullscreen || binding.modifiers.body
+            ? document.body
+            : el;
+          removeClass(target, 'el-loading-parent--relative');
+          removeClass(target, 'el-loading-parent--hidden');
         });
         el.instance.visible = false;
       }
@@ -59,10 +56,10 @@ exports.install = Vue => {
       });
 
       if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') {
-        parent.style.position = 'relative';
+        addClass(parent, 'el-loading-parent--relative');
       }
       if (binding.modifiers.fullscreen && binding.modifiers.lock) {
-        parent.style.overflow = 'hidden';
+        addClass(parent, 'el-loading-parent--hidden');
       }
       el.domVisible = true;
 

packages/loading/src/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import loadingVue from './loading.vue';
-import { getStyle } from 'element-ui/src/utils/dom';
+import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
 import merge from 'element-ui/src/utils/merge';
 
 const LoadingConstructor = Vue.extend(loadingVue);
@@ -23,14 +23,11 @@ LoadingConstructor.prototype.close = function() {
     fullscreenLoading = undefined;
   }
   this.$on('after-leave', _ => {
-    if (this.fullscreen && this.originalOverflow !== 'hidden') {
-      document.body.style.overflow = this.originalOverflow;
-    }
-    if (this.fullscreen || this.body) {
-      document.body.style.position = this.originalPosition;
-    } else {
-      this.target.style.position = this.originalPosition;
-    }
+    const target = this.fullscreen || this.body
+      ? document.body
+      : this.target;
+    removeClass(target, 'el-loading-parent--relative');
+    removeClass(target, 'el-loading-parent--hidden');
     if (this.$el && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
     }
@@ -88,10 +85,10 @@ const Loading = (options = {}) => {
 
   addStyle(options, parent, instance);
   if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') {
-    parent.style.position = 'relative';
+    addClass(parent, 'el-loading-parent--relative');
   }
   if (options.fullscreen && options.lock) {
-    parent.style.overflow = 'hidden';
+    addClass(parent, 'el-loading-parent--hidden');
   }
   parent.appendChild(instance.$el);
   Vue.nextTick(() => {

packages/select/src/select.vue

@@ -26,8 +26,7 @@
       <input
         type="text"
         class="el-select__input"
-        :class="`is-${ selectSize }`"
-        @focus="visible = true"
+        :class="[selectSize ? `is-${ selectSize }` : '']"
         :disabled="disabled"
         @keyup="managePlaceholder"
         @keydown="resetInputState"
@@ -540,7 +539,7 @@
           let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
           const tags = this.$refs.tags;
           input.style.height = this.selected.length === 0 && this.selectSize === 'mini'
-            ? sizeMap[this.selectSize]
+            ? sizeMap[this.selectSize] + 'px'
             : Math.max(tags ? (tags.clientHeight + 10) : 0, sizeMap[this.selectSize] || 40) + 'px';
           if (this.visible && this.emptyText !== false) {
             this.broadcast('ElSelectDropdown', 'updatePopper');

packages/table/README.md

@@ -77,6 +77,7 @@ Vue.component('el-table-column', ElTableColumn)
 | render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
 | sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
 | sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效 | Function(a, b) | — | — |
+| sort-by | 对数据进行排序的时候按照 sort-by 排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 0 个排序，如果第 0 个相等，再按照第 1 个排序，以此类推。 | Function(row, index)/String/Array | — | — |
 | resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
 | formatter | 用来格式化内容 | Function(row, column) | — | — |
 | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |

packages/table/src/table-column.js

@@ -134,6 +134,7 @@ export default {
       default: false
     },
     sortMethod: Function,
+    sortBy: [String, Function, Array],
     resizable: {
       type: Boolean,
       default: true
@@ -234,6 +235,7 @@ export default {
       headerAlign: this.headerAlign ? 'is-' + this.headerAlign : (this.align ? 'is-' + this.align : null),
       sortable: this.sortable === '' ? true : this.sortable,
       sortMethod: this.sortMethod,
+      sortBy: this.sortBy,
       resizable: this.resizable,
       showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
       formatter: this.formatter,

packages/table/src/table-store.js

@@ -8,7 +8,7 @@ const sortData = (data, states) => {
   if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
     return data;
   }
-  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod);
+  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
 };
 
 const getKeysMap = function(array, rowKey) {

packages/table/src/table.vue

@@ -345,6 +345,7 @@
         this.updateScrollY();
         this.layout.update();
         this.$nextTick(() => {
+          if (this.destroyed) return;
           if (this.height) {
             this.layout.setHeight(this.height);
           } else if (this.maxHeight) {
@@ -355,7 +356,7 @@
           if (this.$el) {
             this.isHidden = this.$el.clientWidth === 0;
             if (this.isHidden && this.layout.bodyWidth) {
-              setTimeout(() => this.doLayout());
+              setTimeout(() => this.debouncedLayout());
             }
           }
         });
@@ -496,6 +497,7 @@
     },
 
     destroyed() {
+      this.destroyed = true;
       if (this.windowResizeListener) removeResizeListener(this.$el, this.windowResizeListener);
     },
 
@@ -536,7 +538,8 @@
         resizeProxyVisible: false,
         // 是否拥有多级表头
         isGroup: false,
-        scrollPosition: 'left'
+        scrollPosition: 'left',
+        destroyed: false
       };
     }
   };

packages/table/src/util.js

@@ -17,28 +17,61 @@ const isObject = function(obj) {
   return obj !== null && typeof obj === 'object';
 };
 
-export const orderBy = function(array, sortKey, reverse, sortMethod) {
-  if (typeof reverse === 'string') {
-    reverse = reverse === 'descending' ? -1 : 1;
-  }
-  if (!sortKey && !sortMethod) {
+export const orderBy = function(array, sortKey, reverse, sortMethod, sortBy) {
+  if (!sortKey && !sortMethod && (!sortBy || Array.isArray(sortBy) && !sortBy.length)) {
     return array;
   }
-  const order = (reverse && reverse < 0) ? -1 : 1;
-
-  // sort on a copy to avoid mutating original array
-  return array.slice().sort(sortMethod ? function(a, b) {
-    const result = sortMethod(a, b);
-    return result === 0 ? 0 : result > 0 ? order : -order;
-  } : function(a, b) {
-    if (sortKey !== '$key') {
-      if (isObject(a) && '$value' in a) a = a.$value;
-      if (isObject(b) && '$value' in b) b = b.$value;
+  if (typeof reverse === 'string') {
+    reverse = reverse === 'descending' ? -1 : 1;
+  } else {
+    reverse = (reverse && reverse < 0) ? -1 : 1;
+  }
+  const getKey = sortMethod ? null : function(value, index) {
+    if (sortBy) {
+      if (!Array.isArray(sortBy)) {
+        sortBy = [sortBy];
+      }
+      return sortBy.map(function(by) {
+        if (typeof by === 'string') {
+          return getValueByPath(value, by);
+        } else {
+          return by(value, index, array);
+        }
+      });
     }
-    a = isObject(a) ? getValueByPath(a, sortKey) : a;
-    b = isObject(b) ? getValueByPath(b, sortKey) : b;
-    return a === b ? 0 : a > b ? order : -order;
-  });
+    if (sortKey !== '$key') {
+      if (isObject(value) && '$value' in value) value = value.$value;
+    }
+    return [isObject(value) ? getValueByPath(value, sortKey) : value];
+  };
+  const compare = function(a, b) {
+    if (sortMethod) {
+      return sortMethod(a.value, b.value);
+    }
+    for (let i = 0, len = a.key.length; i < len; i++) {
+      if (a.key[i] < b.key[i]) {
+        return -1;
+      }
+      if (a.key[i] > b.key[i]) {
+        return 1;
+      }
+    }
+    return 0;
+  };
+  return array.map(function(value, index) {
+    return {
+      value: value,
+      index: index,
+      key: getKey ? getKey(value, index) : null
+    };
+  }).sort(function(a, b) {
+    let order = compare(a, b);
+    if (!order) {
+      // make stable https://en.wikipedia.org/wiki/Sorting_algorithm#Stability
+      order = a.index - b.index;
+    }
+    return order * reverse;
+  }).map(item => item.value);
 };
 
 export const getColumnById = function(table, columnId) {

packages/theme-chalk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/theme-chalk/src/common/var.scss

@@ -2,12 +2,12 @@
 
 /* Transition
 -------------------------- */
-$--all-transition: all .3s cubic-bezier(.645,.045,.355,1);
-$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-$--fade-linear-transition: opacity 200ms linear;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1);
-$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);
+$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
+$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--fade-linear-transition: opacity 200ms linear !default;
+$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms !default;
+$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
+$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
 
 /* Colors
 -------------------------- */

packages/theme-chalk/src/date-picker/picker.scss

@@ -15,14 +15,14 @@
   @include m((daterange, timerange)) {
     &.el-input,
     &.el-input__inner {
-      width: 320px;
+      width: 350px;
     }
   }
 
   @include m(datetimerange) {
     &.el-input,
     &.el-input__inner {
-      width: 370px;
+      width: 400px;
     }
   }
 
@@ -42,7 +42,7 @@
     height: 100%;
     margin: 0;
     padding: 0;
-    width: 38%;
+    width: 39%;
     text-align: center;
     font-size: $--font-size-base;
     color: $--color-text-regular;

packages/theme-chalk/src/date-picker/time-spinner.scss

@@ -3,7 +3,7 @@
 @include b(time-spinner) {
   &.has-seconds {
     .el-time-spinner__wrapper {
-      width: 33%;
+      width: 33.3%;
     }
 
     .el-time-spinner__wrapper:nth-child(2) {

packages/theme-chalk/src/loading.scss

@@ -1,6 +1,16 @@
 @import "mixins/mixins";
 @import "common/var";
 
+@include b(loading-parent) {
+  @include m(relative) {
+    position: relative !important;
+  }
+
+  @include m(hidden) {
+    overflow: hidden !important;
+  }
+}
+
 @include b(loading-mask) {
   position: absolute;
   z-index: 10000;

packages/theme-chalk/src/pagination.scss

@@ -155,7 +155,7 @@
       width: 50px;
     }
 
-    .el-input__inner {
+    &.el-input .el-input__inner {
       height: $--pagination-button-height;
     }
 

packages/theme-chalk/src/step.scss

@@ -206,6 +206,12 @@
       bottom: 0;
       left: 11px;
     }
+
+    @include e(icon) {
+      @include when(icon) {
+        width: 24px;
+      }
+    }
   }
 
   @include when(center) {
@@ -244,10 +250,6 @@
       width: 16px;
       height: 16px;
       font-size: 12px;
-
-      @include when(icon) {
-        width: 30px;
-      }
     }
 
     @include e(icon-inner) {

packages/theme-chalk/src/tree.scss

@@ -33,7 +33,7 @@
     cursor: pointer;
 
     & > .el-tree-node__expand-icon {
-      margin: 0 8px;
+      padding: 6px;
     }
     & > .el-checkbox {
       margin-right: 8px;
@@ -45,13 +45,8 @@
 
   @include e(expand-icon) {
     cursor: pointer;
-    width: 0;
-    height: 0;
-    margin-left: 10px;
-    border: 3.5px solid transparent;
-    border-right-width: 0;
-    border-left-color: $--tree-expand-icon-color;
-    border-left-width: 6px;
+    color: $--tree-expand-icon-color;
+    font-size: 12px;
 
     transform: rotate(0deg);
     transition: transform 0.3s ease-in-out;
@@ -61,7 +56,7 @@
     }
 
     &.is-leaf {
-      border-color: transparent;
+      color: transparent;
       cursor: default;
     }
   }

packages/theme-chalk/src/upload.scss

@@ -330,7 +330,12 @@
       font-size: 20px;
       background-color: rgba(0, 0, 0, .5);
       transition: opacity .3s;
-      @include utils-vertical-center;
+      &::after {
+        display: inline-block;
+        content: "";
+        height: 100%;
+        vertical-align: middle
+      }
 
       span {
         display: none;

packages/tree/src/model/tree-store.js

@@ -54,6 +54,7 @@ export default class TreeStore {
           node.visible = allHidden === false;
         }
       }
+      if (!value) return;
 
       if (node.visible && !node.isLeaf) node.expand();
     };

packages/tree/src/tree-node.vue

@@ -10,7 +10,7 @@
     <div class="el-tree-node__content"
       :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
       <span
-        class="el-tree-node__expand-icon"
+        class="el-tree-node__expand-icon el-icon-caret-right"
         @click.stop="handleExpandIconClick"
         :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
       </span>

packages/upload/src/upload-list.vue

@@ -41,20 +41,20 @@
         :stroke-width="listType === 'picture-card' ? 6 : 2"
         :percentage="parsePercentage(file.percentage)">
       </el-progress>
-        <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
+      <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
         <span
           class="el-upload-list__item-preview"
           v-if="handlePreview && listType === 'picture-card'"
           @click="handlePreview(file)"
         >
-          <i class="el-icon-view"></i>
+          <i class="el-icon-zoom-in"></i>
         </span>
         <span
           v-if="!disabled"
           class="el-upload-list__item-delete"
           @click="$emit('remove', file)"
         >
-          <i class="el-icon-delete2"></i>
+          <i class="el-icon-delete"></i>
         </span>
       </span>
     </li>

src/directives/repeat-click.js

@@ -13,7 +13,8 @@ export default {
       interval = null;
     };
 
-    on(el, 'mousedown', () => {
+    on(el, 'mousedown', (e) => {
+      if (e.button !== 0) return;
       startTime = new Date();
       once(document, 'mouseup', clear);
       clearInterval(interval);

src/index.js

@@ -173,7 +173,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 };
 
 module.exports = {
-  version: '2.0.1',
+  version: '2.0.2',
   locale: locale.use,
   i18n: locale.i18n,
   install,

test/unit/specs/loading.spec.js

@@ -1,3 +1,4 @@
+import { getStyle } from '../../../src/utils/dom';
 import { createVue, destroyVM } from '../util';
 import Vue from 'vue';
 import LoadingRaw from 'packages/loading';
@@ -142,7 +143,7 @@ describe('Loading', () => {
         }
       }, true);
       Vue.nextTick(() => {
-        expect(document.body.style.overflow).to.equal('hidden');
+        expect(getStyle(document.body, 'overflow')).to.equal('hidden');
         vm.loading = false;
         document.body.removeChild(document.querySelector('.el-loading-mask'));
         document.body.removeChild(vm.$el);
@@ -197,7 +198,7 @@ describe('Loading', () => {
       expect(mask.parentNode).to.equal(container);
       loadingInstance.close();
       setTimeout(() => {
-        expect(container.style.position).to.equal('relative');
+        expect(getStyle(container, 'position')).to.equal('relative');
         done();
       }, 200);
     });
@@ -243,7 +244,7 @@ describe('Loading', () => {
 
     it('lock', () => {
       loadingInstance = Loading({ lock: true });
-      expect(document.body.style.overflow).to.equal('hidden');
+      expect(getStyle(document.body, 'overflow')).to.equal('hidden');
     });
 
     it('text', () => {

test/unit/specs/table.spec.js

@@ -995,7 +995,14 @@ describe('Table', () => {
           'sortable :sort-method="sortMethod"', '', '', '', {
             methods: {
               sortMethod(a, b) {
-                return a.runtime < b.runtime;
+                // sort method should return number
+                if (a.runtime < b.runtime) {
+                  return 1;
+                }
+                if (a.runtime > b.runtime) {
+                  return -1;
+                }
+                return 0;
               }
             }
           });
@@ -1013,6 +1020,46 @@ describe('Table', () => {
         }, DELAY);
       });
 
+      it('sortable by method', done => {
+        const vm = createTable(
+          'sortable :sort-by="sortBy"', '', '', '', {
+            methods: {
+              sortBy(a) {
+                return -a.runtime;
+              }
+            }
+          });
+
+        setTimeout(_ => {
+          const elm = vm.$el.querySelector('.caret-wrapper');
+          elm.click();
+
+          setTimeout(_ => {
+            const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
+            expect(toArray(lastCells).map(node => node.textContent)).to.eql(['100', '95', '92', '92', '80']);
+            destroyVM(vm);
+            done();
+          }, DELAY);
+        }, DELAY);
+      });
+
+      it('sortable by property', done => {
+        const vm = createTable(
+          'sortable sort-by="runtime"', '', '', '', {});
+
+        setTimeout(_ => {
+          const elm = vm.$el.querySelector('.caret-wrapper');
+          elm.click();
+
+          setTimeout(_ => {
+            const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
+            expect(toArray(lastCells).map(node => node.textContent)).to.eql(['80', '92', '92', '95', '100']);
+            destroyVM(vm);
+            done();
+          }, DELAY);
+        }, DELAY);
+      });
+
       it('sort-change', done => {
         let result;
         const vm = createTable('sortable="custom"', '', '', '', {