[release] 2.0.1

CHANGELOG.en-US.md

@@ -1,6 +1,14 @@
 ## Changelog
 
-### 2.0.0
+### 2.0.1
+
+*2017-10-28*
+
+- Fixed style error of RadioButton and CheckboxButton, #7793
+- Fixed TimePicker not respond to mouse scroll in some conditions, #7811
+- Fixed incomplete styles of some components when imported on demand, #7811
+
+### 2.0.0 Carbon
 
 *2017-10-27*
 

CHANGELOG.zh-CN.md

@@ -1,6 +1,14 @@
 ## 更新日志
 
-### 2.0.0
+### 2.0.1
+
+*2017-10-28*
+
+- 修复 RadioButton 和 CheckboxButton 的样式问题，#7793
+- 修复 TimePicker 在某些情况下无法滚动的问题，#7811
+- 修复部分组件在按需引入时样式不完整的问题，#7811
+
+### 2.0.0 Carbon
 
 *2017-10-27*
 
@@ -137,7 +145,7 @@
   - 移除 `theme-default`
   - 最低兼容 Vue 2.5.2 和 IE 10
   - 表单组件的 `change` 事件和 Pagination 的 `current-change` 事件现在仅响应用户交互
-  - Button 和表单组件的 `size` 属性不再接受 `large` 值，可接受 `medium`、`small` 和 `mini`
+  - Button 和表单组件的 `size` 属性现在可接受 `medium`、`small` 和 `mini`
   - 为了方便使用第三方图标，Button 的 `icon` 属性、Input 的 `prefix-icon` 和 `suffix-icon` 属性、Steps 的 `icon` 属性现在需要传入完整的图标类名
 - Dialog
   - 移除 `size` 属性。现在 Dialog 的尺寸由 `width` 和 `fullscreen` 控制

examples/app.vue

@@ -202,7 +202,10 @@
     },
 
     watch: {
-      lang() {
+      lang(val) {
+        if (val === 'zh-CN') {
+          this.suggestJump();
+        }
         this.localize();
       }
     },
@@ -210,11 +213,28 @@
     methods: {
       localize() {
         use(this.lang === 'zh-CN' ? zhLocale : enLocale);
+      },
+      suggestJump() {
+        const href = location.href;
+        const preferGithub = localStorage.getItem('PREFER_GITHUB');
+        if (href.indexOf('element-cn') > -1 || preferGithub) return;
+        setTimeout(() => {
+          this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
+            .then(() => {
+              location.href = location.href.replace('element.', 'element-cn.');
+            })
+            .catch(() => {
+              localStorage.setItem('PREFER_GITHUB', true);
+            });
+        }, 1000);
       }
     },
 
     mounted() {
       this.localize();
+      if (this.lang === 'zh-CN') {
+        this.suggestJump();
+      }
       setTimeout(() => {
         const notified = localStorage.getItem('RELEASE_NOTIFIED');
         if (!notified) {

examples/components/theme-picker.vue

@@ -128,10 +128,27 @@
           }
         };
 
+        const shadeColor = (color, shade) => {
+          let red = parseInt(color.slice(0, 2), 16);
+          let green = parseInt(color.slice(2, 4), 16);
+          let blue = parseInt(color.slice(4, 6), 16);
+
+          red = Math.round((1 - shade) * red);
+          green = Math.round((1 - shade) * green);
+          blue = Math.round((1 - shade) * blue);
+
+          red = red.toString(16);
+          green = green.toString(16);
+          blue = blue.toString(16);
+
+          return `#${ red }${ green }${ blue }`;
+        };
+
         const clusters = [theme];
         for (let i = 0; i <= 9; i++) {
           clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
         }
+        clusters.push(shadeColor(theme, 0.1));
         return clusters;
       }
     }

examples/docs/zh-CN/table.md

@@ -298,10 +298,10 @@
         return row.tag === value;
       },
 
-      tableRowClassName({row, rowndex}) {
-        if (rowndex === 1) {
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
           return 'warning-row';
-        } else if (rowndex === 3) {
+        } else if (rowIndex === 3) {
           return 'success-row';
         }
         return '';

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.0":"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.1":"2.0"}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [
@@ -57,7 +57,7 @@
     "throttle-debounce": "^1.0.1"
   },
   "peerDependencies": {
-    "vue": "^2.3.0"
+    "vue": "^2.5.2"
   },
   "devDependencies": {
     "algoliasearch": "^3.24.5",

packages/date-picker/src/basic/time-spinner.vue

@@ -3,6 +3,7 @@
     <template v-if="!arrowControl">
       <el-scrollbar
         @mouseenter.native="emitSelectRange('hours')"
+        @mousemove.native="adjustCurrentSpinner('hours')"
         class="el-time-spinner__wrapper"
         wrap-style="max-height: inherit;"
         view-class="el-time-spinner__list"
@@ -18,6 +19,7 @@
       </el-scrollbar>
       <el-scrollbar
         @mouseenter.native="emitSelectRange('minutes')"
+        @mousemove.native="adjustCurrentSpinner('minutes')"
         class="el-time-spinner__wrapper"
         wrap-style="max-height: inherit;"
         view-class="el-time-spinner__list"
@@ -33,6 +35,7 @@
       <el-scrollbar
         v-show="showSeconds"
         @mouseenter.native="emitSelectRange('seconds')"
+        @mousemove.native="adjustCurrentSpinner('seconds')"
         class="el-time-spinner__wrapper"
         wrap-style="max-height: inherit;"
         view-class="el-time-spinner__list"
@@ -196,16 +199,10 @@
       emitSelectRange(type) {
         if (type === 'hours') {
           this.$emit('select-range', 0, 2);
-          this.adjustSpinner('minutes', this.minutes);
-          this.adjustSpinner('seconds', this.seconds);
         } else if (type === 'minutes') {
           this.$emit('select-range', 3, 5);
-          this.adjustSpinner('hours', this.hours);
-          this.adjustSpinner('seconds', this.seconds);
         } else if (type === 'seconds') {
           this.$emit('select-range', 6, 8);
-          this.adjustSpinner('minutes', this.minutes);
-          this.adjustSpinner('hours', this.hours);
         }
         this.currentScrollbar = type;
       },
@@ -237,6 +234,10 @@
         this.adjustSpinner('seconds', this.seconds);
       },
 
+      adjustCurrentSpinner(type) {
+        this.adjustSpinner(type, this[type]);
+      },
+
       adjustSpinner(type, value) {
         if (this.arrowControl) return;
         const el = this.$refs[type].wrap;

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

@@ -89,19 +89,19 @@
                 @click="leftPrevMonth"
                 class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
               <button
-                  type="button"
-                  @click="leftNextYear"
-                  v-if="unlinkPanels"
-                  :disabled="!enableYearArrow"
-                  :class="{ 'is-disabled': !enableYearArrow }"
-                  class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+                type="button"
+                @click="leftNextYear"
+                v-if="unlinkPanels"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
               <button
-                  type="button"
-                  @click="leftNextMonth"
-                  v-if="unlinkPanels"
-                  :disabled="!enableMonthArrow"
-                  :class="{ 'is-disabled': !enableMonthArrow }"
-                  class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
+                type="button"
+                @click="leftNextMonth"
+                v-if="unlinkPanels"
+                :disabled="!enableMonthArrow"
+                :class="{ 'is-disabled': !enableMonthArrow }"
+                class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
               <div>{{ leftLabel }}</div>
             </div>
             <date-table
@@ -120,19 +120,19 @@
           <div class="el-picker-panel__content el-date-range-picker__content is-right">
             <div class="el-date-range-picker__header">
               <button
-                  type="button"
-                  @click="rightPrevYear"
-                  v-if="unlinkPanels"
-                  :disabled="!enableYearArrow"
-                  :class="{ 'is-disabled': !enableYearArrow }"
-                  class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+                type="button"
+                @click="rightPrevYear"
+                v-if="unlinkPanels"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
               <button
-                  type="button"
-                  @click="rightPrevMonth"
-                  v-if="unlinkPanels"
-                  :disabled="!enableMonthArrow"
-                  :class="{ 'is-disabled': !enableMonthArrow }"
-                  class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+                type="button"
+                @click="rightPrevMonth"
+                v-if="unlinkPanels"
+                :disabled="!enableMonthArrow"
+                :class="{ 'is-disabled': !enableMonthArrow }"
+                class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
               <button
                 type="button"
                 @click="rightNextYear"
@@ -336,7 +336,6 @@
         if (val && this.$refs.minTimePicker) {
           this.$refs.minTimePicker.date = val;
           this.$refs.minTimePicker.value = val;
-          this.$refs.minTimePicker.adjustSpinners();
         }
       },
 
@@ -344,7 +343,6 @@
         if (val && this.$refs.maxTimePicker) {
           this.$refs.maxTimePicker.date = val;
           this.$refs.maxTimePicker.value = val;
-          this.$refs.maxTimePicker.adjustSpinners();
         }
       },
 

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

@@ -135,9 +135,6 @@
             this.maxDate = advanceTime(new Date(), 60 * 60 * 1000);
           }
         }
-        if (this.visible) {
-          this.$nextTick(_ => this.adjustSpinners());
-        }
       },
 
       visible(val) {

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

@@ -51,6 +51,8 @@
         if (val) {
           this.oldValue = this.value;
           this.$nextTick(() => this.$refs.spinner.emitSelectRange('hours'));
+        } else {
+          this.needInitAdjust = true;
         }
       },
 
@@ -63,8 +65,9 @@
         }
 
         this.date = date;
-        if (this.visible) {
+        if (this.visible && this.needInitAdjust) {
           this.$nextTick(_ => this.adjustSpinners());
+          this.needInitAdjust = false;
         }
       },
 
@@ -90,7 +93,8 @@
         selectableRange: [],
         selectionRange: [0, 2],
         disabled: false,
-        arrowControl: false
+        arrowControl: false,
+        needInitAdjust: true
       };
     },
 

packages/pagination/src/pagination.js

@@ -3,6 +3,7 @@ import ElSelect from 'element-ui/packages/select';
 import ElOption from 'element-ui/packages/option';
 import ElInput from 'element-ui/packages/input';
 import Locale from 'element-ui/src/mixins/locale';
+import { valueEquals } from 'element-ui/src/utils/util';
 
 export default {
   name: 'ElPagination',
@@ -147,9 +148,10 @@ export default {
       watch: {
         pageSizes: {
           immediate: true,
-          handler(value) {
-            if (Array.isArray(value)) {
-              this.$parent.internalPageSize = value.indexOf(this.$parent.pageSize) > -1
+          handler(newVal, oldVal) {
+            if (valueEquals(newVal, oldVal)) return;
+            if (Array.isArray(newVal)) {
+              this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1
                 ? this.$parent.pageSize
                 : this.pageSizes[0];
             }
@@ -179,8 +181,7 @@ export default {
 
       components: {
         ElSelect,
-        ElOption,
-        ElInput
+        ElOption
       },
 
       methods: {
@@ -202,6 +203,8 @@ export default {
         };
       },
 
+      components: { ElInput },
+
       methods: {
         handleFocus(event) {
           this.oldValue = event.target.value;

packages/select/src/select.vue

@@ -114,6 +114,7 @@
   import { t } from 'element-ui/src/locale';
   import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
   import { getValueByPath } from 'element-ui/src/utils/util';
+  import { valueEquals } from 'element-ui/src/utils/util';
   import NavigationMixin from './navigation-mixin';
 
   const sizeMap = {
@@ -122,18 +123,6 @@
     'mini': 28
   };
 
-  const valueEquals = (a, b) => {
-    // see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
-    if (a === b) return true;
-    if (!(a instanceof Array)) return false;
-    if (!(b instanceof Array)) return false;
-    if (a.length !== b.length) return false;
-    for (let i = 0; i !== a.length; ++i) {
-      if (a[i] !== b[i]) return false;
-    }
-    return true;
-  };
-
   export default {
     mixins: [Emitter, Locale, Focus('reference'), NavigationMixin],
 

packages/theme-chalk/package.json

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

packages/theme-chalk/src/autocomplete.scss

@@ -3,6 +3,7 @@
 @import "common/var";
 @import "./input.scss";
 @import "./scrollbar.scss";
+@import "./popper";
 
 @include b(autocomplete) {
   position: relative;

packages/theme-chalk/src/cascader.scss

@@ -1,6 +1,7 @@
 @import "mixins/mixins";
-@import "./input.scss";
 @import "common/var";
+@import "./input.scss";
+@import "./popper";
 
 @include b(cascader) {
   display: inline-block;

packages/theme-chalk/src/checkbox.scss

@@ -6,6 +6,7 @@
 @include b(checkbox) {
   color: $--checkbox-color;
   font-weight: $--checkbox-font-weight;
+  font-size: $--font-size-base;
   position: relative;
   cursor: pointer;
   display: inline-block;
@@ -339,3 +340,7 @@
     }
   }
 }
+
+@include b(checkbox-group) {
+  font-size: 0;
+}

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

@@ -8,4 +8,5 @@
 @import "./date-picker/time-range-picker.scss";
 @import "./date-picker/time-picker.scss";
 @import "./input.scss";
-@import "./scrollbar.scss";
+@import "./scrollbar.scss";
+@import "./popper";

packages/theme-chalk/src/dropdown.scss

@@ -1,6 +1,7 @@
 @import "mixins/mixins";
 @import "common/var";
 @import "button";
+@import "./popper";
 
 @include b(dropdown) {
   display: inline-block;

packages/theme-chalk/src/input-number.scss

@@ -124,14 +124,15 @@
 
   @include when(without-controls) {
     .el-input__inner {
+      padding-left: 15px;
       padding-right: 15px;
     }
   }
 
   @include when(controls-right) {
     .el-input__inner {
-        padding-left: 15px;
-        padding-right: #{$--input-height + 10};
+      padding-left: 15px;
+      padding-right: #{$--input-height + 10};
     }
 
     @include e((increase, decrease)) {

packages/theme-chalk/src/popover.scss

@@ -1,5 +1,6 @@
 @import "mixins/mixins";
 @import "common/var";
+@import "./popper";
 
 @include b(popover) {
   position: absolute;
@@ -27,102 +28,3 @@
     margin-bottom: 12px;
   }
 }
-
-@include b(popper) {
-  .popper__arrow,
-  .popper__arrow::after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  .popper__arrow {
-    border-width: $--popover-arrow-size;
-    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
-  }
-
-  .popper__arrow::after {
-    content: " ";
-    border-width: $--popover-arrow-size;
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: #{$--popover-arrow-size + 6};
-  }
-
-  &[x-placement^="top"] .popper__arrow {
-    bottom: -$--popover-arrow-size;
-    left: 50%;
-    margin-right: #{$--tooltip-arrow-size / 2};
-    border-top-color: $--popover-border-color;
-    border-bottom-width: 0;
-
-    &::after {
-      bottom: 1px;
-      margin-left: -$--popover-arrow-size;
-      border-top-color: $--popover-fill;
-      border-bottom-width: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: #{$--popover-arrow-size + 6};
-  }
-
-  &[x-placement^="bottom"] .popper__arrow {
-    top: -$--popover-arrow-size;
-    left: 50%;
-    margin-right: #{$--tooltip-arrow-size / 2};
-    border-top-width: 0;
-    border-bottom-color: $--popover-border-color;
-
-    &::after {
-      top: 1px;
-      margin-left: -$--popover-arrow-size;
-      border-top-width: 0;
-      border-bottom-color: $--popover-fill;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: #{$--popover-arrow-size + 6};
-  }
-
-  &[x-placement^="right"] .popper__arrow {
-    top: 50%;
-    left: -$--popover-arrow-size;
-    margin-bottom: #{$--tooltip-arrow-size / 2};
-    border-right-color: $--popover-border-color;
-    border-left-width: 0;
-
-    &::after {
-      bottom: -$--popover-arrow-size;
-      left: 1px;
-      border-right-color: $--popover-fill;
-      border-left-width: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: #{$--popover-arrow-size + 6};
-  }
-
-  &[x-placement^="left"] .popper__arrow {
-    top: 50%;
-    right: -$--popover-arrow-size;
-    margin-bottom: #{$--tooltip-arrow-size / 2};
-    border-right-width: 0;
-    border-left-color: $--popover-border-color;
-
-    &::after {
-      right: 1px;
-      bottom: -$--popover-arrow-size;
-      margin-left: -$--popover-arrow-size;
-      border-right-width: 0;
-      border-left-color: $--popover-fill;
-    }
-  }
-}

packages/theme-chalk/src/popper.scss

@@ -0,0 +1,101 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(popper) {
+  .popper__arrow,
+  .popper__arrow::after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .popper__arrow {
+    border-width: $--popover-arrow-size;
+    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
+  }
+
+  .popper__arrow::after {
+    content: " ";
+    border-width: $--popover-arrow-size;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="top"] .popper__arrow {
+    bottom: -$--popover-arrow-size;
+    left: 50%;
+    margin-right: #{$--tooltip-arrow-size / 2};
+    border-top-color: $--popover-border-color;
+    border-bottom-width: 0;
+
+    &::after {
+      bottom: 1px;
+      margin-left: -$--popover-arrow-size;
+      border-top-color: $--popover-fill;
+      border-bottom-width: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="bottom"] .popper__arrow {
+    top: -$--popover-arrow-size;
+    left: 50%;
+    margin-right: #{$--tooltip-arrow-size / 2};
+    border-top-width: 0;
+    border-bottom-color: $--popover-border-color;
+
+    &::after {
+      top: 1px;
+      margin-left: -$--popover-arrow-size;
+      border-top-width: 0;
+      border-bottom-color: $--popover-fill;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="right"] .popper__arrow {
+    top: 50%;
+    left: -$--popover-arrow-size;
+    margin-bottom: #{$--tooltip-arrow-size / 2};
+    border-right-color: $--popover-border-color;
+    border-left-width: 0;
+
+    &::after {
+      bottom: -$--popover-arrow-size;
+      left: 1px;
+      border-right-color: $--popover-fill;
+      border-left-width: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="left"] .popper__arrow {
+    top: 50%;
+    right: -$--popover-arrow-size;
+    margin-bottom: #{$--tooltip-arrow-size / 2};
+    border-right-width: 0;
+    border-left-color: $--popover-border-color;
+
+    &::after {
+      right: 1px;
+      bottom: -$--popover-arrow-size;
+      margin-left: -$--popover-arrow-size;
+      border-right-width: 0;
+      border-left-color: $--popover-fill;
+    }
+  }
+}

packages/theme-chalk/src/radio-group.scss

@@ -5,4 +5,5 @@
   display: inline-block;
   line-height: 1;
   vertical-align: middle;
+  font-size: 0;
 }

packages/theme-chalk/src/radio.scss

@@ -12,6 +12,7 @@
   display: inline-block;
   white-space: nowrap;
   outline: none;
+  font-size: $--font-size-base;
   @include utils-user-select(none);
 
   @include when(bordered) {

packages/theme-chalk/src/select-dropdown.scss

@@ -1,5 +1,6 @@
 @import "mixins/mixins";
 @import "common/var";
+@import "./popper";
 
 @include b(select-dropdown) {
   position: absolute;

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

@@ -3,3 +3,4 @@
 @import "./date-picker/time-picker.scss";
 @import "./input.scss";
 @import "./scrollbar.scss";
+@import "./popper";

packages/theme-chalk/src/time-select.scss

@@ -1,7 +1,8 @@
+@import "common/var";
 @import "./date-picker/picker.scss";
 @import "./date-picker/date-picker.scss";
-@import "common/var";
 @import "./scrollbar.scss";
+@import "./popper";
 
 .time-select {
   margin: 5px 0;

src/index.js

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

src/utils/util.js

@@ -71,3 +71,14 @@ export const generateId = function() {
   return Math.floor(Math.random() * 10000);
 };
 
+export const valueEquals = (a, b) => {
+  // see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
+  if (a === b) return true;
+  if (!(a instanceof Array)) return false;
+  if (!(b instanceof Array)) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i !== a.length; ++i) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};

types/carousel.d.ts

@@ -36,18 +36,18 @@ export declare class ElCarousel extends ElementUIComponent {
    *
    * @param index Index of the slide to be switched to (starting from 0)
    */
-  setActiveItem (index: number)
+  setActiveItem (index: number): void
 
   /**
    * Manually switch slide by carousel item's name
    *
    * @param name The name of the corresponding `el-carousel-item`
    */
-  setActiveItem (name: string)
+  setActiveItem (name: string): void
 
   /** Switch to the previous slide */
-  prev ()
+  prev (): void
 
   /** Switch to the next slide */
-  next ()
+  next (): void
 }

types/component.d.ts

@@ -3,7 +3,7 @@ import Vue from 'vue'
 /** ElementUI component common definition */
 export declare class ElementUIComponent extends Vue {
   /** Install component into Vue */
-  static install (vue: typeof Vue)
+  static install (vue: typeof Vue): void
 }
 
 /** Component size definition for button, input, etc */

types/index.d.ts

@@ -77,7 +77,7 @@ declare namespace ElementUI {
    * Please do not invoke this method directly.
    * Call `Vue.use(ElementUI)` to install.
    */
-  export function install (vue: typeof Vue, options: ElementUI.InstallationOptions)
+  export function install (vue: typeof Vue, options: ElementUI.InstallationOptions): void
 
   /** ElementUI component common definition */
   export type Component = ElementUIComponent

types/loading.d.ts

@@ -30,7 +30,7 @@ export interface LoadingServiceOptions {
 /** Loading Component */
 export declare class ElLoadingComponent extends Vue {
   /** Close the Loading instance */
-  close ()
+  close (): void
 }
 
 /** Loading directive definition */
@@ -46,7 +46,7 @@ export interface ElLoadingDirective extends VNodeDirective {
 /** Show animation while loading data */
 export interface ElLoading {
   /** Install Loading directive into Vue */
-  install (vue: typeof Vue)
+  install (vue: typeof Vue): void
 
   /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */
   service (options: LoadingServiceOptions): ElLoadingComponent

types/message-box.d.ts

@@ -139,10 +139,10 @@ export interface ElMessageBox {
   prompt: ElMessageBoxShortcutMethod
 
   /** Set default options of message boxes */
-  setDefaults (defaults: ElMessageBoxOptions)
+  setDefaults (defaults: ElMessageBoxOptions): void
 
   /** Close current message box */
-  close ()
+  close (): void
 }
 
 declare module 'vue/types/vue' {

types/message.d.ts

@@ -5,7 +5,7 @@ export type MessageType = 'success' | 'warning' | 'info' | 'error'
 /** Message Component */
 export declare class ElMessageComponent extends Vue {
   /** Close the Loading instance */
-  close ()
+  close (): void
 }
 
 export interface CloseEventHandler {

types/notification.d.ts

@@ -4,7 +4,7 @@ import { MessageType } from './message'
 /** Notification Component */
 export declare class ElNotificationComponent extends Vue {
   /** Close the Notification instance */
-  close ()
+  close (): void
 }
 
 export interface ElNotificationOptions {

types/tree.d.ts

@@ -1,6 +1,5 @@
 import { CreateElement, VNode } from 'vue'
 import { ElementUIComponent } from './component'
-import {Tree} from "./index";
 
 /** The node of the tree */
 export interface TreeNode {
@@ -46,7 +45,7 @@ export declare class ElTree extends ElementUIComponent {
   props: object
 
   /** Method for loading subtree data */
-  load: (node: TreeNode, resolve) => void
+  load: (node: TreeNode, resolve: Function) => void
 
   /** Render function for tree node */
   renderContent: RenderContent
@@ -128,7 +127,7 @@ export declare class ElTree extends ElementUIComponent {
    * @param checked Indicating the node checked or not
    * @param deep Indicating whether to checked state deeply or not
    */
-  setChecked (data: TreeNode | any, checked: boolean, deep: boolean)
+  setChecked (data: TreeNode | any, checked: boolean, deep: boolean): void
 
   /**
    * Return the highlight node's key (null if no node is highlighted)