update typings

CHANGELOG.en-US.md

@@ -167,6 +167,7 @@ in `lazy` mode #6235
   - Removed `icon` attribute. Now the suffix icon can be configured using `suffix-icon` attribute or `suffix` named slot
   - Removed `on-icon-click` attribute and `click` event. Now to add click handler on icons, please use named slots
 - Autocomplete
+  - Removed `icon` and `on-icon-click` attributes. Now the icons can be configured using `prefix` or `suffix` named slot
   - Removed `custom-item` attribute. Now the template of input suggestions can be customized using `scoped slot`
 - Table
   - Removed support for customizing column template using `inline-template`

CHANGELOG.zh-CN.md

@@ -162,6 +162,7 @@
   - 移除 `icon` 属性。现在通过 `suffix-icon` 属性或者 `suffix` 具名 slot 来加入尾部图标
   - 移除 `on-icon-click` 属性和 `click` 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标
 - Autocomplete
+  - 移除 `icon` 和 `on-icon-click` 属性。现在通过 `prefix` 和 `suffix` 具名 slot 来加入图标
   - 移除 `custom-item` 属性。现在通过 `scoped slot` 自定义输入建议列表项的内容
 - Table
   - 移除通过 `inline-template` 自定义列模板的功能

examples/docs/en-US/breadcrumb.md

@@ -35,7 +35,7 @@ Displays the location of the current page, making it easier to browser back.
 | Attribute      | Description          | Type      | Accepted Values            | Default|
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | separator character | string | — | / |
-| separator-class | iconfont-separator's class | string | — | - |
+| separator-class | class name of icon separator | string | — | - |
 
 ### Breadcrumb Item Attributes
 | Attribute      | Description          | Type      | Accepted Values            | Default|

examples/docs/en-US/cascader.md

@@ -1679,6 +1679,7 @@ Search and select options with a keyword.
 | debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
 | change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
 | size  | size of Input | string | medium / small / mini | — |
+| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
 
 ### props
 | Attribute | Description | Type | Accepted Values | Default |
@@ -1687,7 +1688,6 @@ Search and select options with a keyword.
 | value     | specify which key of option object is used as the option's value | string | — | — |
 | children  | specify which key of option object is used as the option's child options | string | — | — |
 | disabled  | specify which key of option object indicates if the option is disabled | string | — | — |
-| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/en-US/checkbox.md

@@ -304,7 +304,7 @@ Checkbox with button styles.
 ### Checkbox-group Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
-|size | size of checkbox buttons or bordered checkboxes | string | large/small | — |
+|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
 | disabled  | whether the nesting checkboxes are disabled | boolean   | — | false   |
 | min     | minimum number of checkbox checked   | number    |       —        |     —    |
 | max     | maximum number of checkbox checked   | number    |       —        |     —    |

examples/docs/en-US/dropdown.md

@@ -323,9 +323,8 @@ Besides default size, Dropdown component provides three additional sizes for you
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type          | menu button type, refer to `Button` Component, only works when `split-button` is true  | string  |  —   |    —     |
-| size          | menu size, refer to `Button` Component, also works on the Split-button  | string  | large / small / mini  |    —     |
+| size          | menu size, also works on the split button  | string  | medium / small / mini  |    —     |
 | split-button | whether a button group is displayed | boolean         |     —       | false   |
-| size          | component size, refer to `Button` component     | string          | large, small, mini  |  —  |
 | placement    | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | how to trigger     | string  |    hover/click  |  hover |
 | hide-on-click | whether to hide menu after clicking menu-item     | boolean          | — | true |

examples/docs/en-US/form.md

@@ -264,7 +264,7 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
     </el-col>
   </el-form-item>
   <el-form-item label="Instant delivery">
-    <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+    <el-switch v-model="form.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="Activity type">
     <el-checkbox-group v-model="form.type">
@@ -426,7 +426,7 @@ Form component allows you to verify your data, helping you find and correct erro
     </el-col>
   </el-form-item>
   <el-form-item label="Instant delivery" prop="delivery">
-    <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
+    <el-switch v-model="ruleForm.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="Activity type" prop="type">
     <el-checkbox-group v-model="ruleForm.type">
@@ -791,7 +791,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | model| data of form component | object | — | — |
 | rules | validation rules of form | object | — | — |
 | inline | whether the form is inline | boolean | — | false |
-| label-position | position of label | string | left/right/top | right |
+| label-position | position of label | string | left / right / top | right |
 | label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
 | label-suffix | suffix of the label | string | — | — |
 | show-message  | whether to show the error message | boolean | — | true |

examples/docs/en-US/input-number.md

@@ -7,7 +7,9 @@
         num3: 5,
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1,
+        num8: 1
       }
     },
     methods: {

examples/docs/en-US/input.md

@@ -473,9 +473,12 @@ Customize how suggestions are displayed.
   v-model="state3"
   :fetch-suggestions="querySearch"
   placeholder="Please input"
-  @select="handleSelect"
+  @select="handleSelect">
-  icon="edit"
+  <i
-  :on-icon-click="handleIconClick">
+    class="el-icon-edit el-input__icon"
+    slot="suffix"
+    @click="handleIconClick">
+  </i>
   <template slot-scope="props">
     <div class="value">{{ props.item.value }}</div>
     <span class="link">{{ props.item.link }}</span>
@@ -609,17 +612,17 @@ Search data from server-side.
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | ----| ----| ----| ---- | ----- |
-|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | — | text |
+|type| type of input | string | text / textarea | text |
-|value| binding value | string/number| — | — |
+|value| binding value | string / number| — | — |
 |maxlength| maximum Input text length| number| — | — |
 |minlength| minimum Input text length| number | — | — |
 |placeholder| placeholder of Input| string | — | — |
 |disabled | whether Input is disabled | boolean | — | false |
-|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — |
+|size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — |
 | prefix-icon   | prefix icon class  | string          | — | — |
 | suffix-icon   | suffix icon class  | string          | — | — |
 |rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
-|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }  | boolean/object | — | false |
+|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }  | boolean / object | — | false |
 |auto-complete | same as `auto-complete` in native input | string | on/off | off |
 |name | same as `name` in native input | string | — | — |
 | readonly | same as `readonly` in native input | boolean | — | false |
@@ -629,9 +632,9 @@ Search data from server-side.
 |resize| control the resizability | string | none, both, horizontal, vertical | — |
 |autofocus | same as `autofocus` in native input | boolean | — | false |
 |form | same as `form` in native input | string | — | — |
-| on-icon-click | hook function when clicking on the input icon | function | — | — |
 | label | label text | string | — | — |
-### Input slot
+
+### Input slots
 
 | Name | Description |
 |------|--------|
@@ -665,12 +668,22 @@ Attribute | Description | Type | Options | Default
 | name | same as `name` in native input | string | — | — |
 | select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false |
 | label | label text | string | — | — |
+
 ### props
 | Attribute | Description | Type | Accepted Values | Default |
 | --------- | ----------------- | ------ | ------ | ------ |
 | label     | specify which key of option object is used as the option's label | string | — | value |
 | value     | specify which key of option object is used as the option's value | string | — | value |
 
+### Autocomplete slots
+
+| Name | Description |
+|------|--------|
+| prefix | content as Input prefix |
+| suffix | content as Input suffix |
+| prepend | content to prepend before Input |
+| append | content to append after Input |
+
 ### Autocomplete Events
 
 | Event Name | Description | Parameters |

examples/docs/en-US/menu.md

@@ -272,12 +272,11 @@ Vertical NavMenu could be collapsed.
 ### Menu Attribute
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| mode     | menu display mode   | string  |   horizontal/vertical   | vertical |
+| mode     | menu display mode   | string  |   horizontal / vertical   | vertical |
 | collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |
 | background-color  | background color of Menu (hex format) | string |   —   | #ffffff |
 | text-color  | text color of Menu (hex format) | string |   —   | #2d2f33 |
 | active-text-color  | text color of currently active menu item (hex format) | string |   —   | #409EFF |
-| theme     | theme color   | string    | light/dark | light |
 | default-active | index of currently active menu | string    | — | — |
 | default-openeds | array that contains keys of currently active sub-menus  | Array    | — | — |
 | unique-opened  |  whether only one sub-menu can be active  | boolean   | — | false   |

examples/docs/en-US/message-box.md

@@ -377,7 +377,7 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 | title | title of the MessageBox | string | — | — |
 | message | content of the MessageBox | string | — | — |
 | dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
-| type | message type, used for icon display | string | success/info/warning/error | — |
+| type | message type, used for icon display | string | success / info / warning / error | — |
 | customClass | custom class name for MessageBox | string | — | — |
 | callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
 | beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm' or 'cancel'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |

examples/docs/en-US/message.md

@@ -288,6 +288,7 @@ You can call `Message.closeAll()` to manually close all the instances.
 | message | message text | string / VNode | — | — |
 | type | message type | string | success/warning/info/error | info |
 | iconClass | custom icon's class, overrides `type` | string | — | — |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
 | customClass | custom class name for Message | string | — | — |
 | duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
 | showClose | whether to show a close button | boolean | — | false |

examples/docs/en-US/progress.md

@@ -1,3 +1,14 @@
+<style>
+  .demo-box.demo-progress {
+    .el-progress--line {
+      margin-bottom: 15px;
+      width: 350px;
+    }
+    .el-progress--circle {
+      margin-right: 15px;
+    }
+  }
+</style>
 ## Progress
 
 Progress is used to show the progress of current operation, and inform the user the current status.

examples/docs/en-US/slider.md

@@ -22,6 +22,33 @@
   }
 </script>
 
+<style>
+  .demo-box.demo-slider .source {
+    padding: 0;
+  }
+  
+  .demo-box.demo-slider .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  
+  .demo-box.demo-slider .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+  
+  .demo-box.demo-slider .demonstration + .el-slider {
+    float: right;
+    width: 70%;
+    margin-right: 20px;
+  }
+</style>
+
 ## Slider
 
 Drag the slider within a fixed range.
@@ -209,11 +236,11 @@ Selecting a range of values is supported.
 | show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
 | show-stops | whether to display breakpoints | boolean | — | false |
 | show-tooltip | whether to display tooltip value | boolean | — | true |
-| format-tooltip | format to display tooltip value | Function(value) | — | — |
+| format-tooltip | format to display tooltip value | function(value) | — | — |
 | range | whether to select a range | boolean | — | false |
 | vertical | vertical mode | boolean | — | false |
-| height | Slider height, required in vertical mode | String | — | — |
+| height | Slider height, required in vertical mode | string | — | — |
-| label | label for screen reader | String | — | — |
+| label | label for screen reader | string | — | — |
 |debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
 
 ## Events

examples/docs/en-US/switch.md

@@ -27,15 +27,15 @@
 Switch is used for switching between two opposing states.
 
 ### Basic usage
-:::demo Bind `v-model` to a `Boolean` typed variable. The `on-color` and `off-color` attribute decides the background color in two states.
+:::demo Bind `v-model` to a `Boolean` typed variable. The `true-color` and `false-color` attribute decides the background color in two states.
 
 ```html
 <el-switch v-model="value1">
 </el-switch>
 <el-switch
   v-model="value2"
-  on-color="#13ce66"
+  true-color="#13ce66"
-  off-color="#ff4949">
+  false-color="#ff4949">
 </el-switch>
 
 <script>
@@ -52,21 +52,21 @@ Switch is used for switching between two opposing states.
 :::
 
 ### Text description
-:::demo You can add `on-text` and `off-text` attribute to show texts.
+:::demo You can add `true-text` and `false-text` attribute to show texts.
 
 ```html
 <el-switch
   v-model="value3"
-  on-text="Pay by month"
+  true-text="Pay by month"
-  off-text="Pay by year">
+  false-text="Pay by year">
 </el-switch>
 <el-switch
   style="display: block"
   v-model="value4"
-  on-color="#13ce66"
+  true-color="#13ce66"
-  off-color="#ff4949"
+  false-color="#ff4949"
-  on-text="Pay by month"
+  true-text="Pay by month"
-  off-text="Pay by year">
+  false-text="Pay by year">
 </el-switch>
 
 <script>
@@ -84,16 +84,16 @@ Switch is used for switching between two opposing states.
 
 ### Extended value types
 
-:::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
+:::demo You can set `true-value` and `false-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
 
 ```html
 <el-tooltip :content="'Switch value: ' + value5" placement="top">
   <el-switch
     v-model="value5"
-    on-color="#13ce66"
+    true-color="#13ce66"
-    off-color="#ff4949"
+    false-color="#ff4949"
-    on-value="100"
+    true-value="100"
-    off-value="0">
+    false-value="0">
   </el-switch>
 </el-tooltip>
 
@@ -143,14 +143,14 @@ Switch is used for switching between two opposing states.
 ----| ----| ----| ----|----
 disabled | whether Switch is disabled | boolean | — | false
 width | width of Switch | number | — | 40
-on-close-icon | class name of the icon displayed when in `on` state, overrides `on-text` | string | — | —
+true-icon-class | class name of the icon displayed when in `on` state, overrides `true-text` | string | — | —
-off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
+false-icon-class |class name of the icon displayed when in `off` state, overrides `false-text`| string | — | —
-on-text | text displayed when in `on` state | string | — | —
+true-text | text displayed when in `on` state | string | — | —
-off-text | text displayed when in `off` state | string | — | —
+false-text | text displayed when in `off` state | string | — | —
-on-value  | switch value when in `on` state | boolean / string / number | — | true
+true-value  | switch value when in `on` state | boolean / string / number | — | true
-off-value  | switch value when in `off` state | boolean / string / number | — | false
+false-value  | switch value when in `off` state | boolean / string / number | — | false
-on-color | background color when in `on` state | string | — | #409EFF
+true-color | background color when in `on` state | string | — | #409EFF
-off-color | background color when in `off` state | string | — | #C0CCDA
+false-color | background color when in `off` state | string | — | #C0CCDA
 name| input name of Switch | string | — | —
 
 ### Events

examples/docs/en-US/table.md

@@ -1387,7 +1387,7 @@ Customize table column so it can be integrated with other components.
       label="Date"
       width="180">
       <template slot-scope="scope">
-        <el-icon name="time"></el-icon>
+        <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
     </el-table-column>
@@ -1399,7 +1399,7 @@ Customize table column so it can be integrated with other components.
           <p>Name: {{ scope.row.name }}</p>
           <p>Addr: {{ scope.row.address }}</p>
           <div slot="reference" class="name-wrapper">
-            <el-tag>{{ scope.row.name }}</el-tag>
+            <el-tag size="medium">{{ scope.row.name }}</el-tag>
           </div>
         </el-popover>
       </template>
@@ -1408,10 +1408,10 @@ Customize table column so it can be integrated with other components.
       label="Operations">
       <template slot-scope="scope">
         <el-button
-          size="small"
+          size="mini"
           @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
         <el-button
-          size="small"
+          size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
       </template>

examples/docs/en-US/tabs.md

@@ -374,7 +374,6 @@ Only card type Tabs support addable & closeable.
 | closable  | whether Tab is closable | boolean   | — |  false  |
 | addable  | whether Tab is addable   | boolean   | — |  false  |
 | editable  | whether Tab is addable and closable | boolean   | — |  false  |
-| active-name(deprecated)  | name of the selected tab  | string   |  —  |  name of first tab |
 | value  | name of the selected tab  | string   |  —  |  name of first tab |
 | tab-position  | position of tabs | string   |  top/right/bottom/left  |  top |
 

examples/docs/en-US/transition.md

@@ -146,7 +146,7 @@ For collapse effect, use the `el-collapse-transition` component.
 
 ```js
 // fade/zoom
-import 'element-ui/lib/theme-defaut/base.css';
+import 'element-ui/lib/theme-chalk/base.css';
 // collapse
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import Vue from 'vue'

examples/docs/zh-CN/cascader.md

@@ -1679,6 +1679,7 @@
 | debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
 | change-on-select | 是否允许选择任意一级的选项 | boolean | — | false |
 | size | 尺寸 | string | medium / small / mini | — |
+| before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | — |
 
 ### props
 | 参数     | 说明              | 类型   | 可选值 | 默认值 |
@@ -1687,7 +1688,6 @@
 | label    | 指定选项标签为选项对象的某个属性值 | string | — | — |
 | children | 指定选项的子选项为选项对象的某个属性值 | string | — | — |
 | disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | — |
-| before-filter | 可选参数, 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选。 | function(value) | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

examples/docs/zh-CN/dropdown.md

@@ -329,7 +329,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type          | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效)   | string  |          —             |    —     |
-| size          | 菜单尺寸，同 Button 组件，在`split-button`为 true 的情况下也对触发按钮生效  | string | medium / small / mini | — |
+| size          | 菜单尺寸，在`split-button`为 true 的情况下也对触发按钮生效  | string | medium / small / mini | — |
 | split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
 | placement    | 菜单弹出位置     | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | 触发下拉的行为     | string          | hover, click  | hover |

examples/docs/zh-CN/form.md

@@ -258,7 +258,7 @@
     </el-col>
   </el-form-item>
   <el-form-item label="即时配送">
-    <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+    <el-switch v-model="form.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="活动性质">
     <el-checkbox-group v-model="form.type">
@@ -417,7 +417,7 @@
     </el-col>
   </el-form-item>
   <el-form-item label="即时配送" prop="delivery">
-    <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
+    <el-switch v-model="ruleForm.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="活动性质" prop="type">
     <el-checkbox-group v-model="ruleForm.type">

examples/docs/zh-CN/input.md

@@ -543,9 +543,12 @@ export default {
   v-model="state3"
   :fetch-suggestions="querySearch"
   placeholder="请输入内容"
-  @select="handleSelect"
+  @select="handleSelect">
-  icon="edit"
+  <i
-  :on-icon-click="handleIconClick">
+    class="el-icon-edit el-input__icon"
+    slot="suffix"
+    @click="handleIconClick">
+  </i>
   <template slot-scope="props">
     <div class="name">{{ props.item.value }}</div>
     <span class="addr">{{ props.item.address }}</span>
@@ -765,17 +768,17 @@ export default {
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| type         | 类型   | string  | text/textarea | text |
+| type         | 类型   | string  | text / textarea | text |
-| value         | 绑定值           | string, number  | — | — |
+| value         | 绑定值           | string / number  | — | — |
 | maxlength     | 最大输入长度      | number          |  —  | — |
 | minlength     | 最小输入长度      | number          | — | — |
 | placeholder   | 输入框占位文本    | string          | — | — |
 | disabled      | 禁用            | boolean         | — | false   |
-| size          | 输入框尺寸，只在 `type!="textarea"` 时有效      | string          | large, small, mini  | — |
+| size          | 输入框尺寸，只在 `type!="textarea"` 时有效      | string          | medium / small / mini  | — |
 | prefix-icon   | 输入框头部图标    | string          | — | — |
 | suffix-icon   | 输入框尾部图标    | string          | — | — |
 | rows          | 输入框行数，只对 `type="textarea"` 有效  |  number | — |  2   |
-| autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean/object | — |  false   |
+| autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean / object | — |  false   |
 | auto-complete | 原生属性，自动补全 | string | on, off | off |
 | name | 原生属性 | string | — | — |
 | readonly | 原生属性，是否只读 | boolean | — | false |
@@ -786,7 +789,8 @@ export default {
 | autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
 | form | 原生属性 | string | — | — |
 | label | 输入框关联的label文字 | string | — | — |
-### Input slot
+
+### Input slots
 | name | 说明 |
 |------|--------|
 | prefix | 输入框头部内容 |
@@ -818,8 +822,6 @@ export default {
 | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  | — | — |
 | popper-class | Autocomplete 下拉列表的类名 | string | — | — |
 | trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |
-| on-icon-click | 点击图标的回调函数 | function | — | — |
-| icon          | 输入框尾部图标    | string          | — | — |
 | name | 原生属性 | string | — | — |
 | select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件 | boolean | — | false |
 | label | 输入框关联的label文字 | string | — | — |
@@ -830,6 +832,14 @@ export default {
 | value    | 指定选项的值为选项对象的某个属性值 | string | — | value |
 | label    | 指定选项标签为选项对象的某个属性值 | string | — | value |
 
+### Autocomplete slots
+| name | 说明 |
+|------|--------|
+| prefix | 输入框头部内容 |
+| suffix | 输入框尾部内容 |
+| prepend | 输入框前置内容 |
+| append | 输入框后置内容 |
+
 ### Autocomplete Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|

examples/docs/zh-CN/menu.md

@@ -273,7 +273,7 @@
 ### Menu Attribute
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| mode     | 模式   | string  |   horizontal,vertical   | vertical |
+| mode     | 模式   | string  |   horizontal / vertical   | vertical |
 | collapse  | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean  |   —   | false |
 | background-color  | 菜单的背景色（仅支持 hex 格式） | string |   —   | #ffffff |
 | text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #2d2f33 |

examples/docs/zh-CN/message-box.md

@@ -375,7 +375,7 @@ import { MessageBox } from 'element-ui';
 | title | MessageBox 标题 | string | — | — |
 | message | MessageBox 消息正文内容 | string / VNode | — | — |
 | dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
-| type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
+| type | 消息类型，用于显示图标 | string | success / info / warning / error | — |
 | customClass | MessageBox 的自定义类名 | string | — | — |
 | callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
 | beforeClose | MessageBox 关闭前的回调，会暂停实例的关闭 | function(action, instance, done)，action 的值为'confirm'或'cancel'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例 | — | — |

examples/docs/zh-CN/message.md

@@ -288,6 +288,7 @@ import { Message } from 'element-ui';
 | message | 消息文字 | string / VNode | — | — |
 | type | 主题 | string | success/warning/info/error | info |
 | iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
+| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
 | customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
 | showClose | 是否显示关闭按钮 | boolean | — | false |

examples/docs/zh-CN/slider.md

@@ -233,11 +233,11 @@
 | show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true|
 | show-stops | 是否显示间断点 | boolean | — | false |
 | show-tooltip | 是否显示 tooltip | boolean | — | true |
-| format-tooltip | 格式化 tooltip message | Function(value) | — | — |
+| format-tooltip | 格式化 tooltip message | function(value) | — | — |
 | range | 是否为范围选择 | boolean | — | false |
 | vertical | 是否竖向模式 | boolean | — | false |
-| height | Slider 高度，竖向模式时必填 | String | — | — |
+| height | Slider 高度，竖向模式时必填 | string | — | — |
-| label | 屏幕阅读器标签 | String | — | — |
+| label | 屏幕阅读器标签 | string | — | — |
 | debounce | 输入时的去抖延迟，毫秒，仅在`show-input`等于true时有效 | number | — | 300 |
 
 ### Events

examples/docs/zh-CN/switch.md

@@ -28,15 +28,13 @@
 
 ### 基本用法
 
-:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-color`属性与`off-color`属性来设置开关的背景色。
+:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`true-color`属性与`false-color`属性来设置开关的背景色。
 
 ```html
-<el-switch v-model="value1">
-</el-switch>
 <el-switch
   v-model="value2"
-  on-color="#13ce66"
+  true-color="#13ce66"
-  off-color="#ff4949">
+  false-color="#ff4949">
 </el-switch>
 
 <script>
@@ -54,21 +52,21 @@
 
 ### 文字描述
 
-:::demo 使用`on-text`属性与`off-text`属性来设置开关的文字描述。
+:::demo 使用`true-text`属性与`false-text`属性来设置开关的文字描述。
 
 ```html
 <el-switch
   v-model="value3"
-  on-text="按月付费"
+  true-text="按月付费"
-  off-text="按年付费">
+  false-text="按年付费">
 </el-switch>
 <el-switch
   style="display: block"
   v-model="value4"
-  on-color="#13ce66"
+  true-color="#13ce66"
-  off-color="#ff4949"
+  false-color="#ff4949"
-  on-text="按月付费"
+  true-text="按月付费"
-  off-text="按年付费">
+  false-text="按年付费">
 </el-switch>
 
 <script>
@@ -86,16 +84,16 @@
 
 ### 扩展的 value 类型
 
-:::demo 设置`on-value`和`off-value`属性，接受`Boolean`, `String`或`Number`类型的值。
+:::demo 设置`true-value`和`false-value`属性，接受`Boolean`, `String`或`Number`类型的值。
 
 ```html
 <el-tooltip :content="'Switch value: ' + value5" placement="top">
   <el-switch
     v-model="value5"
-    on-color="#13ce66"
+    true-color="#13ce66"
-    off-color="#ff4949"
+    false-color="#ff4949"
-    on-value="100"
+    true-value="100"
-    off-value="0">
+    false-value="0">
   </el-switch>
 </el-tooltip>
 
@@ -146,14 +144,14 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | width  | switch 的宽度（像素）    | number   | — | 40 |
-| on-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `on-text`    | string   | — | — |
+| true-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `true-text`    | string   | — | — |
-| off-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text`    | string   | — | — |
+| false-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `false-text`    | string   | — | — |
-| on-text  | switch 打开时的文字描述    | string   | — | — |
+| true-text  | switch 打开时的文字描述    | string   | — | — |
-| off-text  | switch 关闭时的文字描述    | string   | — | — |
+| false-text  | switch 关闭时的文字描述    | string   | — | — |
-| on-value  | switch 打开时的值    | boolean / string / number | — | true |
+| true-value  | switch 打开时的值    | boolean / string / number | — | true |
-| off-value  | switch 关闭时的值    | boolean / string / number | — | false |
+| false-value  | switch 关闭时的值    | boolean / string / number | — | false |
-| on-color  | switch 打开时的背景色    | string   | — | #409EFF |
+| true-color  | switch 打开时的背景色    | string   | — | #409EFF |
-| off-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
+| false-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
 | name  | switch 对应的 name 属性    | string   | — | — |
 
 ### Events

examples/docs/zh-CN/table.md

@@ -1429,7 +1429,7 @@
       label="日期"
       width="180">
       <template slot-scope="scope">
-        <el-icon name="time"></el-icon>
+        <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
     </el-table-column>
@@ -1441,7 +1441,7 @@
           <p>姓名: {{ scope.row.name }}</p>
           <p>住址: {{ scope.row.address }}</p>
           <div slot="reference" class="name-wrapper">
-            <el-tag>{{ scope.row.name }}</el-tag>
+            <el-tag size="medium">{{ scope.row.name }}</el-tag>
           </div>
         </el-popover>
       </template>
@@ -1449,10 +1449,10 @@
     <el-table-column label="操作">
       <template slot-scope="scope">
         <el-button
-          size="small"
+          size="mini"
           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
         <el-button
-          size="small"
+          size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
       </template>

examples/docs/zh-CN/tabs.md

@@ -372,7 +372,6 @@
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
 | addable  | 标签是否可增加   | boolean   | — |  false  |
 | editable  | 标签是否同时可增加和关闭   | boolean   | — |  false  |
-| active-name(deprecated)  | 选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 | value  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 | tab-position  | 选项卡所在位置 | string   |  top/right/bottom/left  |  top |
 

examples/docs/zh-CN/transition.md

@@ -146,7 +146,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
 
 ```js
 // fade/zoom 等
-import 'element-ui/lib/theme-defaut/base.css';
+import 'element-ui/lib/theme-chalk/base.css';
 // collapse 展开折叠
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import Vue from 'vue'

packages/autocomplete/src/autocomplete.vue

@@ -28,6 +28,12 @@
       <template slot="append" v-if="$slots.append">
         <slot name="append"></slot>
       </template>
+      <template slot="prefix" v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template slot="suffix" v-if="$slots.suffix">
+        <slot name="suffix"></slot>
+      </template>
     </el-input>
     <el-autocomplete-suggestions
       visible-arrow
@@ -96,8 +102,6 @@
         default: true
       },
       customItem: String,
-      icon: String,
-      onIconClick: Function,
       selectWhenUnmatched: {
         type: Boolean,
         default: false

packages/select/src/select.vue

@@ -18,7 +18,7 @@
           :hit="item.hitState"
           type="info"
           @close="deleteTag($event, item)"
-          close-transition>
+          disable-transitions>
           <span class="el-select__tags-text">{{ item.currentLabel }}</span>
         </el-tag>
       </transition-group>
@@ -536,7 +536,9 @@
           if (!this.$refs.reference) return;
           let inputChildNodes = this.$refs.reference.$el.childNodes;
           let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
-          input.style.height = Math.max(this.$refs.tags.clientHeight + 10, sizeMap[this.size] || 40) + 'px';
+          input.style.height = this.selected.length === 0 && this.size === 'mini'
+            ? sizeMap[this.size]
+            : Math.max(this.$refs.tags.clientHeight + 10, sizeMap[this.size] || 40) + 'px';
           if (this.visible && this.emptyText !== false) {
             this.broadcast('ElSelectDropdown', 'updatePopper');
           }

packages/switch/src/component.vue

@@ -13,34 +13,35 @@
       @change="handleChange"
       ref="input"
       :name="name"
-      :true-value="onValue"
+      :true-value="trueValue"
-      :false-value="offValue"
+      :false-value="falseValue"
       :disabled="disabled"
       @keydown.enter="switchValue"
     >
     <span
       :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
-      v-if="offIconClass || offText">
+      v-if="falseIconClass || falseText">
-      <i :class="[offIconClass]" v-if="offIconClass"></i>
+      <i :class="[falseIconClass]" v-if="falseIconClass"></i>
-      <span v-if="!offIconClass && offText" :aria-hidden="checked">{{ offText }}</span>
+      <span v-if="!falseIconClass && falseText" :aria-hidden="checked">{{ falseText }}</span>
     </span>
     <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
       <span class="el-switch__button" :style="{ transform }"></span>
     </span>
     <span
       :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
-      v-if="onIconClass || onText">
+      v-if="trueIconClass || trueText">
-      <i :class="[onIconClass]" v-if="onIconClass"></i>
+      <i :class="[trueIconClass]" v-if="trueIconClass"></i>
-      <span v-if="!onIconClass && onText" :aria-hidden="!checked">{{ onText }}</span>
+      <span v-if="!trueIconClass && trueText" :aria-hidden="!checked">{{ trueText }}</span>
     </span>
   </div>
 </template>
 <script>
   import Focus from 'element-ui/src/mixins/focus';
+  import Migrating from 'element-ui/src/mixins/migrating';
 
   export default {
     name: 'ElSwitch',
-    mixins: [Focus('input')],
+    mixins: [Focus('input'), Migrating],
     props: {
       value: {
         type: [Boolean, String, Number],
@@ -54,29 +55,29 @@
         type: Number,
         default: 0
       },
-      onIconClass: {
+      trueIconClass: {
         type: String,
         default: ''
       },
-      offIconClass: {
+      falseIconClass: {
         type: String,
         default: ''
       },
-      onText: String,
+      trueText: String,
-      offText: String,
+      falseText: String,
-      onColor: {
+      trueColor: {
         type: String,
         default: ''
       },
-      offColor: {
+      falseColor: {
         type: String,
         default: ''
       },
-      onValue: {
+      trueValue: {
         type: [Boolean, String, Number],
         default: true
       },
-      offValue: {
+      falseValue: {
         type: [Boolean, String, Number],
         default: false
       },
@@ -91,13 +92,13 @@
       };
     },
     created() {
-      if (!~[this.onValue, this.offValue].indexOf(this.value)) {
+      if (!~[this.trueValue, this.falseValue].indexOf(this.value)) {
-        this.$emit('input', this.offValue);
+        this.$emit('input', this.falseValue);
       }
     },
     computed: {
       checked() {
-        return this.value === this.onValue;
+        return this.value === this.trueValue;
       },
       transform() {
         return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
@@ -106,15 +107,15 @@
     watch: {
       checked() {
         this.$refs.input.checked = this.checked;
-        if (this.onColor || this.offColor) {
+        if (this.trueColor || this.falseColor) {
           this.setBackgroundColor();
         }
       }
     },
     methods: {
       handleChange(event) {
-        this.$emit('input', !this.checked ? this.onValue : this.offValue);
+        this.$emit('input', !this.checked ? this.trueValue : this.falseValue);
-        this.$emit('change', !this.checked ? this.onValue : this.offValue);
+        this.$emit('change', !this.checked ? this.trueValue : this.falseValue);
         this.$nextTick(() => {
           // set input's checked property
           // in case parent refuses to change component's value
@@ -122,18 +123,32 @@
         });
       },
       setBackgroundColor() {
-        let newColor = this.checked ? this.onColor : this.offColor;
+        let newColor = this.checked ? this.trueColor : this.falseColor;
         this.$refs.core.style.borderColor = newColor;
         this.$refs.core.style.backgroundColor = newColor;
       },
       switchValue() {
         this.$refs.input.click();
+      },
+      getMigratingConfig() {
+        return {
+          props: {
+            'on-color': 'on-color is renamed to true-color.',
+            'off-color': 'off-color is renamed to false-color.',
+            'on-text': 'on-text is renamed to true-text.',
+            'off-text': 'off-text is renamed to false-text.',
+            'on-value': 'on-value is renamed to true-value.',
+            'off-value': 'off-value is renamed to false-value.',
+            'on-icon-class': 'on-icon-class is renamed to true-icon-class.',
+            'off-icon-class': 'off-icon-class is renamed to false-icon-class.'
+          }
+        };
       }
     },
     mounted() {
       /* istanbul ignore if */
       this.coreWidth = this.width || 40;
-      if (this.onColor || this.offColor) {
+      if (this.trueColor || this.falseColor) {
         this.setBackgroundColor();
       }
       this.$refs.input.checked = this.checked;

packages/theme-chalk/src/select.scss

@@ -72,7 +72,7 @@
     border: none;
     outline: none;
     padding: 0;
-    margin-left: 10px;
+    margin-left: 15px;
     color: $--select-multiple-input-color;
     font-size: $--select-font-size;
     vertical-align: baseline;

src/mixins/migrating.js

@@ -23,20 +23,20 @@ export default {
   mounted() {
     if (process.env.NODE_ENV === 'production') return;
     if (!this.$vnode) return;
-    const { props, events } = this.getMigratingConfig();
+    const { props = {}, events = {} } = this.getMigratingConfig();
     const { data, componentOptions } = this.$vnode;
     const definedProps = data.attrs || {};
     const definedEvents = componentOptions.listeners || {};
 
     for (let propName in definedProps) {
       if (definedProps.hasOwnProperty(propName) && props[propName]) {
-        console.warn(`[Element Migrating][Attribute]: ${props[propName]}`);
+        console.warn(`[Element Migrating][${this.$options.name}][Attribute]: ${props[propName]}`);
       }
     }
 
     for (let eventName in definedEvents) {
       if (definedEvents.hasOwnProperty(eventName) && events[eventName]) {
-        console.warn(`[Element Migrating][Event]: ${events[eventName]}`);
+        console.warn(`[Element Migrating][${this.$options.name}][Event]: ${events[eventName]}`);
       }
     }
   },

test/unit/specs/switch.spec.js

@@ -10,10 +10,10 @@ describe('Switch', () => {
 
   it('create', () => {
     vm = createTest(Switch, {
-      onText: 'on',
+      trueText: 'on',
-      offText: 'off',
+      falseText: 'off',
-      onColor: '#0f0',
+      trueColor: '#0f0',
-      offColor: '#f00',
+      falseColor: '#f00',
       width: 100
     });
 
@@ -25,8 +25,8 @@ describe('Switch', () => {
 
   it('switch with icons', () => {
     vm = createTest(Switch, {
-      onIconClass: 'el-icon-check',
+      trueIconClass: 'el-icon-check',
-      offIconClass: 'el-icon-close'
+      falseIconClass: 'el-icon-close'
     });
 
     const icon = vm.$el.querySelector('.el-switch__label--left').querySelector('i');
@@ -125,7 +125,7 @@ describe('Switch', () => {
     vm = createVue({
       template: `
         <div>
-          <el-switch v-model="value" :on-value="onValue" :off-value="offValue"></el-switch>
+          <el-switch v-model="value" :true-value="onValue" :false-value="offValue"></el-switch>
         </div>
       `,
       data() {

types/alert.d.ts

@@ -16,6 +16,9 @@ export declare class ElAlert extends ElementUIComponent {
   /** If closable or not */
   closable: boolean
 
+  /** whether to center the text */
+  center: boolean
+
   /** Customized close button text */
   closeText: string
 

types/aside.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Aside Component */
+export declare class ElAside extends ElementUIComponent {
+  /** Width of the side section */
+  width: string
+}

types/autocomplete.d.ts

@@ -28,12 +28,18 @@ export declare class ElAutocomplete extends ElementUIComponent {
   /** Whether Autocomplete is disabled */
   disabled: boolean
 
-  /** Icon name */
-  icon: string
-
   /** Binding value */
   value: string
 
+  /** Debounce delay when typing */
+  debounce: number
+
+  /** name for the inner native input */
+  name: string
+
+  /** whether to emit select event on enter when there is no autocomplete match */
+  selectWhenUnmatched: boolean
+
   /** Component name of your customized suggestion list item */
   customItem: string
 
@@ -45,7 +51,4 @@ export declare class ElAutocomplete extends ElementUIComponent {
 
   /** Whether show suggestions when input focus */
   triggerOnFocus: boolean
-
-  /** Hook function when clicking on the input icon */
-  onIconClick: IconClickEventHandler
 }

types/breadcrumb.d.ts

@@ -4,4 +4,7 @@ import { ElementUIComponent } from './component'
 export declare class ElBreadcrumb extends ElementUIComponent {
   /** Separator character */
   separator: string
+
+  /** Class name of the icon separator */
+  separatorClass: string
 }

types/button.d.ts

@@ -15,10 +15,13 @@ export declare class ElButton extends ElementUIComponent {
   type: ButtonType
 
   /** Determine whether it's a plain button */
-  plain: Boolean
+  plain: boolean
+
+  /** Determine whether it's a round button */
+  round: boolean
 
   /** Determine whether it's loading */
-  loading: Boolean
+  loading: boolean
 
   /** Disable the button */
   disabled: boolean

types/carousel-item.d.ts

@@ -4,4 +4,7 @@ import { ElementUIComponent } from './component'
 export declare class ElCarouselItem extends ElementUIComponent {
   /** Name of the item, can be used in setActiveItem */
   name: string
+
+  /** Text content for the corresponding indicator */
+  label: string
 }

types/carousel.d.ts

@@ -2,7 +2,7 @@ import { ElementUIComponent } from './component'
 
 export type CarouselIndicatorTrigger = 'hover' | 'click'
 export type CarouselIndicatorPosition = 'outside' | 'none'
-export type CarouselArrawVisibility = 'always' | 'hover' | 'never'
+export type CarouselArrowVisibility = 'always' | 'hover' | 'never'
 export type CarouselType = 'card'
 
 /** Loop a series of images or texts in a limited space */
@@ -26,7 +26,7 @@ export declare class ElCarousel extends ElementUIComponent {
   indicatorPosition: CarouselIndicatorPosition
 
   /** When arrows are shown */
-  arrow: CarouselArrawVisibility
+  arrow: CarouselArrowVisibility
 
   /** Type of the Carousel */
   type: CarouselType

types/cascader.d.ts

@@ -16,7 +16,7 @@ export declare class ElCascader extends ElementUIComponent {
   /** Data of the options */
   options: CascaderOption[]
 
-  /** Configuration options, see the following table */
+  /** Configuration options */
   props: object
 
   /** Selected value */
@@ -51,4 +51,7 @@ export declare class ElCascader extends ElementUIComponent {
 
   /** Size of Input */
   size: ElementUIComponentSize
+
+  /** Hook function before filtering with the value to be filtered as its parameter */
+  beforeFilter: (value: string) => boolean | Promise
 }

types/checkbox-button.d.ts

@@ -0,0 +1,22 @@
+import { ElementUIComponent } from './component'
+
+/** Checkbox Button Component */
+export declare class ElCheckboxButton extends ElementUIComponent {
+  /** Value of the checkbox when used inside a checkbox-group */
+  label: string | number | boolean
+
+  /** Value of the checkbox if it's checked */
+  trueLabel: string | number
+
+  /** Value of the checkbox if it's not checked */
+  falseLabel: string | number
+
+  /** Native 'name' attribute */
+  name: string
+
+  /** If the checkbox is disabled */
+  disabled: boolean
+
+  /** If the checkbox is checked */
+  checked: boolean
+}

types/checkbox-group.d.ts

@@ -1,4 +1,22 @@
-import { ElementUIComponent } from './component'
+import { ElementUIComponent, ElementUIComponentSize } from './component'
 
 /** Checkbox Group Component */
-export declare class ElCheckboxGroup extends ElementUIComponent {}
+export declare class ElCheckboxGroup extends ElementUIComponent {
+  /** Size of checkbox buttons or bordered checkboxes */
+  size: ElementUIComponentSize
+
+  /** Whether the nesting checkboxes are disabled */
+  disabled: boolean
+
+  /** Minimum number of checkbox checked */
+  min: number
+
+  /** Maximum number of checkbox checked */
+  max: number
+
+  /** Font color when button is active */
+  textColor: string
+
+  /** Border and background color when button is active */
+  fill: string
+}

types/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { ElementUIComponent } from './component'
+import { ElementUIComponent, ElementUIComponentSize } from './component'
 
 /** Checkbox Component */
 export declare class ElCheckbox extends ElementUIComponent {
@@ -6,7 +6,7 @@ export declare class ElCheckbox extends ElementUIComponent {
   value: string | string[]
 
   /** Value of the checkbox when used inside a checkbox-group */
-  label: string
+  label: string | number | boolean
 
   /** Value of the checkbox if it's checked */
   trueLabel: string | number
@@ -17,6 +17,12 @@ export declare class ElCheckbox extends ElementUIComponent {
   /** Native 'name' attribute */
   name: string
 
+  /** Whether to add a border around Checkbox */
+  border: boolean
+
+  /** Size of the Checkbox, only works when border is true */
+  size: ElementUIComponentSize
+
   /** If the checkbox is disabled */
   disabled: boolean
 

types/col.d.ts

@@ -37,4 +37,7 @@ export declare class ElCol extends ElementUIComponent {
 
   /** ≥1200 Responsive columns or column props object */
   lg: ResponsiveColumn
+
+  /** custom element tag */
+  tag: string
 }

types/color-picker.d.ts

@@ -1,4 +1,4 @@
-import { ElementUIComponent } from './component'
+import { ElementUIComponent, ElementUIComponentSize } from './component'
 
 export type ColorFormat = 'hsl' | 'hsv' | 'hex' | 'rgb'
 
@@ -7,6 +7,15 @@ export declare class ElColorPicker extends ElementUIComponent {
   /** Whether to display the alpha slider */
   showAlpha: boolean
 
-  /** Color format of v-model */
+  /** Whether to disable the ColorPicker */
+  disabled: boolean
+
+  /** Size of ColorPicker */
+  size: ElementUIComponentSize
+
+  /** Whether to display the alpha slider */
+  popperClass: string
+
+  /** Custom class name for ColorPicker's dropdown */
   colorFormat: ColorFormat
 }

types/component.d.ts

@@ -7,7 +7,7 @@ export declare class ElementUIComponent extends Vue {
 }
 
 /** Component size definition for button, input, etc */
-export type ElementUIComponentSize = 'large' | 'small' | 'mini'
+export type ElementUIComponentSize = 'large' | 'medium' | 'small' | 'mini'
 
 /** Horizontal alignment */
 export type ElementUIHorizontalAlignment = 'left' | 'center' | 'right'

types/container.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Container Component */
+export declare class ElContainer extends ElementUIComponent {
+  /** Layout direction for child elements */
+  direction: 'horizontal' | 'vertical'
+}

types/date-picker.d.ts

@@ -64,7 +64,7 @@ export interface DatePickerOptions {
 /** DatePicker Component */
 export declare class ElDatePicker extends ElementUIComponent {
   /** The value of the date picker */
-  value: Date | Date[]
+  value: Date | string | Date[] | string[]
 
   /** Whether DatePicker is read only */
   readonly: boolean
@@ -84,6 +84,12 @@ export declare class ElDatePicker extends ElementUIComponent {
   /** Placeholder */
   placeholder: string
 
+  /** Placeholder for the start date in range mode */
+  startPlaceholder: string
+
+  /** Placeholder for the end date in range mode */
+  endPlaceholder: string
+
   /** Type of the picker */
   type: DatePickerType
 
@@ -101,4 +107,13 @@ export declare class ElDatePicker extends ElementUIComponent {
 
   /** Range separator */
   rangeSeparator: string
+
+  /** Default date of the calendar */
+  defaultValue: Date | number | string
+
+  /** Format of binding value. If not specified, the binding value will be a Date object */
+  valueFormat: string
+
+  /** name for the inner native input */
+  name: string
 }

types/dialog.d.ts

@@ -1,8 +1,6 @@
 import { VNode } from 'vue'
 import { ElementUIComponent } from './component'
 
-export type DialogSize = 'tiny' | 'small' | 'large' | 'full'
-
 export interface DialogSlots {
   /** Content of the Dialog */
   default: VNode[],
@@ -21,10 +19,13 @@ export declare class ElDialog extends ElementUIComponent {
   /** Title of Dialog */
   title: string
 
-  /** Size of Dialog */
+  /** Width of Dialog */
-  size: DialogSize
+  width: string
 
-  /** Value for `top` of Dialog CSS, works when `size` is not `full` */
+  /** Whether the Dialog takes up full screen */
+  fullscreen: boolean
+
+  /** Value for margin-top of Dialog CSS */
   top: string
 
   /** Whether a mask is displayed */
@@ -48,11 +49,11 @@ export declare class ElDialog extends ElementUIComponent {
   /** Whether to show a close button */
   showClose: boolean
 
+  /** Callback before Dialog closes, and it will prevent Dialog from closing */
+  beforeClose: (done: Function) => void
+
+  /** Whether to align the header and footer in center */
+  center: boolean
+
   $slots: DialogSlots
-
-  /** Open the current instance */
-  open ()
-
-  /** Close the current instance */
-  close ()
 }

types/dropdown-item.d.ts

@@ -3,7 +3,7 @@ import { ElementUIComponent } from './component'
 /** Toggleable menu for displaying lists of links and actions. */
 export declare class ElDropdownItem extends ElementUIComponent {
   /** A command to be dispatched to Dropdown's command callback */
-  command: string
+  command: string | number | object
 
   /** Whether the item is disabled */
   disabled: boolean

types/dropdown.d.ts

@@ -1,7 +1,7 @@
 import { ElementUIComponent, ElementUIComponentSize } from './component'
 import { ButtonType } from './button'
 
-export type DropdownMenuAlignment = 'start' | 'end'
+export type DropdownMenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
 export type DropdownMenuTrigger = 'hover' | 'click'
 
 /** Toggleable menu for displaying lists of links and actions */
@@ -12,11 +12,11 @@ export declare class ElDropdown extends ElementUIComponent {
   /** Whether a button group is displayed */
   splitButton: boolean
 
-  /** Component size */
+  /** menu size, also works on the split button */
   size: ElementUIComponentSize
 
-  /** Horizontal alignment */
+  /** Placement of the menu */
-  menuAlign: DropdownMenuAlignment
+  placement: DropdownMenuAlignment
 
   /** How to trigger */
   trigger: DropdownMenuTrigger

types/footer.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Footer Component */
+export declare class ElFooter extends ElementUIComponent {
+  /** Height of the footer */
+  height: string
+}

types/form-item.d.ts

@@ -1,4 +1,4 @@
-import { ElementUIComponent } from './component'
+import { ElementUIComponent, ElementUIComponentSize } from './component'
 
 /** FormItem Component */
 export declare class ElFormItem extends ElementUIComponent {
@@ -22,4 +22,10 @@ export declare class ElFormItem extends ElementUIComponent {
 
   /** Whether to show the error message */
   showMessage: boolean
+
+  /** Whether to display the error message inline with the form item */
+  inlineMessage: boolean
+
+  /** Controls the size of components in this form */
+  size: ElementUIComponentSize
 }

types/form.d.ts

@@ -1,4 +1,4 @@
-import { ElementUIComponent } from './component'
+import { ElementUIComponent, ElementUIComponentSize } from './component'
 
 export type FormItemLabelPosition = 'left' | 'right' | 'top'
 
@@ -43,12 +43,21 @@ export declare class ElForm extends ElementUIComponent {
   /** Whether to show the error message */
   showMessage: boolean
 
+  /** Whether to display the error message inline with the form item */
+  inlineMessage: boolean
+
+  /** Whether to display an icon indicating the validation result */
+  statusIcon: boolean
+
+  /** Controls the size of components in this form */
+  size: ElementUIComponentSize
+
   /**
    * Validate the whole form
    *
    * @param callback A callback to tell the validation result
    */
-  validate (callback: ValidateCallback): void
+  validate (callback?: ValidateCallback): void
 
   /**
    * Validate a certain form item

types/header.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Header Component */
+export declare class ElHeader extends ElementUIComponent {
+  /** Height of the header */
+  height: string
+}

types/icon.d.ts

@@ -1,10 +0,0 @@
-import { ElementUIComponent } from './component'
-
-/** Avaliable icon names */
-export type ElementUIIcon = 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'caret-bottom' | 'caret-left' | 'caret-right' | 'caret-top' | 'check' | 'circle-check' | 'circle-close' | 'circle-cross' | 'close' | 'upload' | 'd-arrow-left' | 'd-arrow-right' | 'd-caret' | 'date' | 'delete' | 'document' | 'edit' | 'information' | 'loading' | 'menu' | 'message' | 'minus' | 'more' | 'picture' | 'plus' | 'search' | 'setting' | 'share' | 'star-off' | 'star-on' | 'time' | 'warning' | 'delete2' | 'upload2' | 'view'
-
-/** Icon Component */
-export declare class ElIcon extends ElementUIComponent {
-  /** Icon name */
-  name: ElementUIIcon
-}

types/index.d.ts

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
 
 import { ElAlert } from './alert'
+import { ElAside } from './aside'
 import { ElAutocomplete } from './autocomplete'
 import { ElBadge } from './badge'
 import { ElBreadcrumb } from './breadcrumb'
@@ -18,17 +19,20 @@ import { ElCol } from './col'
 import { ElCollapse } from './collapse'
 import { ElCollapseItem } from './collapse-item'
 import { ElColorPicker } from './color-picker'
+import { ElContainer } from './container'
 import { ElDatePicker } from './date-picker'
 import { ElDialog } from './dialog'
 import { ElDropdown } from './dropdown'
 import { ElDropdownItem } from './dropdown-item'
 import { ElDropdownMenu } from './dropdown-menu'
+import { ElFooter } from './footer'
 import { ElForm } from './form'
 import { ElFormItem } from './form-item'
-import { ElIcon } from './icon'
+import { ElHeader } from './header'
 import { ElInput } from './input'
 import { ElInputNumber } from './input-number'
 import { ElLoading } from './loading'
+import { ElMain } from './main'
 import { ElMenu } from './menu'
 import { ElMenuItem } from './menu-item'
 import { ElMenuItemGroup } from './menu-item-group'
@@ -58,6 +62,7 @@ import { ElTabs } from './tabs'
 import { ElTabPane } from './tab-pane'
 import { ElTimePicker } from './time-picker'
 import { ElTooltip } from './tooltip'
+import { ElTransfer } from './transfer'
 import { ElTree } from './tree'
 import { ElUpload } from './upload'
 
@@ -100,6 +105,9 @@ declare namespace ElementUI {
   /** Alert Component */
   export class Alert extends ElAlert {}
 
+  /** Aside Component */
+  export class Aside extends ElAside {}
+
   /** Autocomplete Component */
   export class Autocomplete extends ElAutocomplete {}
 
@@ -148,6 +156,9 @@ declare namespace ElementUI {
   /** Color Picker Component */
   export class ColorPicker extends ElColorPicker {}
 
+  /** Container Component */
+  export class Container extends ElContainer {}
+
   /** Date Picker Component */
   export class DatePicker extends ElDatePicker {}
 
@@ -163,14 +174,17 @@ declare namespace ElementUI {
   /** Dropdown Menu Component */
   export class DropdownMenu extends ElDropdownMenu {}
 
+  /** Footer Component */
+  export class Footer extends ElFooter {}
+
   /** Form Component */
   export class Form extends ElForm {}
 
   /** Form Item Component */
   export class FormItem extends ElFormItem {}
 
-  /** Icon Component */
+  /** Header Component */
-  export class Icon extends ElIcon {}
+  export class Header extends ElHeader {}
 
   /** Input Component */
   export class Input extends ElInput {}
@@ -178,6 +192,9 @@ declare namespace ElementUI {
   /** Input Number Component */
   export class InputNumber extends ElInputNumber {}
 
+  /** Main Component */
+  export class Main extends ElMain {}
+
   /** Menu that provides navigation for your website */
   export class Menu extends ElMenu {}
 
@@ -256,6 +273,9 @@ declare namespace ElementUI {
   /** Tooltip Component */
   export class Tooltip extends ElTooltip {}
 
+  /** Transfer Component */
+  export class Transfer extends ElTransfer {}
+
   /** Tree Component */
   export class Tree extends ElTree {}
 

types/input-number.d.ts

@@ -24,4 +24,13 @@ export declare class ElInputNumber extends ElementUIComponent {
 
   /** Whether to enable the control buttons */
   controls: boolean
+
+  /** Debounce delay when typing, in milliseconds */
+  debounce: number
+
+  /** Position of the control buttons */
+  controlsPosition: string
+
+  /** Same as name in native input */
+  name: string
 }

types/input.d.ts

@@ -2,6 +2,7 @@ import { ElementUIComponent, ElementUIComponentSize } from './component'
 
 /** The resizability of el-input component */
 export type Resizability = 'none' | 'both' | 'horizontal' | 'vertical'
+export type InputType = 'text' | 'textarea'
 
 /** Controls how el-input component automatically sets size */
 export interface AutoSize {
@@ -19,8 +20,8 @@ export interface IconClickEventHandler {
 
 /** Input Component */
 export declare class ElInput extends ElementUIComponent {
-  /** Same as the type attribute of native input, except that it can be textarea */
+  /** Type of input */
-  type: string
+  type: InputType
 
   /** Binding value */
   value: string | number
@@ -40,8 +41,11 @@ export declare class ElInput extends ElementUIComponent {
   /** Size of Input, works when type is not 'textarea' */
   size: ElementUIComponentSize
 
-  /** Icon name */
+  /** Prefix icon class */
-  icon: string
+  prefixIcon: string
+
+  /** Suffix icon class */
+  suffixIcon: string
 
   /** Number of rows of textarea, only works when type is 'textarea' */
   rows: number

types/loading.d.ts

@@ -3,7 +3,7 @@ import Vue, { VNodeDirective } from 'vue'
 /** Options used in Loading service */
 export interface LoadingServiceOptions {
   /** The DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node */
-  target: HTMLElement | string
+  target?: HTMLElement | string
 
   /** Whether to make the mask append to the body element */
   body?: boolean
@@ -17,6 +17,12 @@ export interface LoadingServiceOptions {
   /** Loading text that displays under the spinner */
   text?: string
 
+  /** Class name of the custom spinner */
+  spinner?: string
+
+  /** Background color of the mask */
+  background?: string
+
   /** Custom class name for Loading */
   customClass?: string
 }

types/main.d.ts

@@ -0,0 +1,4 @@
+import { ElementUIComponent } from './component'
+
+/** Main Component */
+export declare class ElMain extends ElementUIComponent {}

types/menu-item.d.ts

@@ -8,7 +8,4 @@ export declare class ElMenuItem extends ElementUIComponent {
 
   /** Vue Router object */
   route: Route
-
-  /** Is menu item disabled */
-  disabled: boolean
 }

types/menu.d.ts

@@ -8,8 +8,17 @@ export declare class ElMenu extends ElementUIComponent {
   /** Menu display mode */
   mode: MenuDisplayMode
 
-  /** Theme color */
+  /** Whether the menu is collapsed (available only in vertical mode) */
-  theme: MenuTheme
+  collapse: boolean
+
+  /** Background color of Menu (hex format) */
+  backgroundColor: string
+
+  /** Text color of Menu (hex format) */
+  textColor: string
+
+  /** Text color of currently active menu item (hex format) */
+  activeTextColor: string
 
   /** Index of currently active menu */
   defaultActive: string

types/message-box.d.ts

@@ -19,6 +19,7 @@ export declare class ElMessageBoxComponent extends Vue {
   type: MessageType
   customClass: string
   showInput: boolean
+  showClose: boolean
   inputValue: string
   inputPlaceholder: string
   inputPattern: RegExp
@@ -27,6 +28,7 @@ export declare class ElMessageBoxComponent extends Vue {
   showConfirmButton: boolean
   showCancelButton: boolean
   action: MessageBoxCloseAction
+  dangerouslyUseHTMLString: boolean
   confirmButtonText: string
   cancelButtonText: string
   confirmButtonLoading: boolean
@@ -78,12 +80,24 @@ export interface ElMessageBoxOptions {
   /** Custom class name of confirm button */
   confirmButtonClass?: string
 
+  /** Whether to align the content in center */
+  center?: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
+  /** Whether to use round button */
+  roundButton?: boolean
+
   /** Whether MessageBox can be closed by clicking the mask */
   closeOnClickModal?: boolean
 
   /** Whether MessageBox can be closed by pressing the ESC */
   closeOnPressEscape?: boolean
 
+  /** Whether to close MessageBox when hash changes */
+  closeOnHashChange?: boolean
+
   /** Whether to show an input */
   showInput?: boolean
 

types/message.d.ts

@@ -37,6 +37,12 @@ export interface ElMessageOptions {
   /** Whether to show a close button */
   showClose?: boolean
 
+  /** Whether to center the text */
+  center?: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
   /** Callback function when closed with the message instance as the parameter */
   onClose?: CloseEventHandler
 }

types/notification.d.ts

@@ -26,9 +26,18 @@ export interface ElNotificationOptions {
   /** Duration before close. It will not automatically close if set 0 */
   duration: number
 
+  /** Whether to show a close button */
+  showClose: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
   /** Callback function when closed */
   onClose: () => void
 
+  /** Callback function when notification clicked */
+  onClick: () => void
+
   /** Offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset */
   offset: number
 }

types/pagination.d.ts

@@ -25,4 +25,13 @@ export declare class ElPagination extends ElementUIComponent {
 
   /** Options of item count per page */
   pageSizes: number[]
+
+  /** Custom class name for the page size Select's dropdown */
+  popperClass: string
+
+  /** Text for the prev button */
+  prevText: string
+
+  /** Text for the prev button */
+  nextText: string
 }

types/popover.d.ts

@@ -53,10 +53,13 @@ export declare class ElPopover extends ElementUIComponent {
   visibleArrow: boolean
 
   /** Parameters for popper.js */
-  options: object
+  popperOptions: object
 
   /** Custom class name for popover */
   popperClass: string
 
+  /** Delay of appearance when trigger is hover, in milliseconds */
+  openDelay: number
+
   $slots: PopoverSlots
 }

types/radio-button.d.ts

@@ -10,4 +10,7 @@ export declare class ElRadioButton extends ElementUIComponent {
 
   /** Whether radio is disabled */
   disabled: boolean
+
+  /** Native 'name' attribute */
+  name: string
 }

types/radio-group.d.ts

@@ -10,6 +10,9 @@ export declare class ElRadioGroup extends ElementUIComponent {
   /** Border and background color when button is active */
   fill: string
 
+  /** Whether the nesting radios are disabled */
+  disabled: boolean
+
   /** Font color when button is active */
   textColor: string
 }

types/radio.d.ts

@@ -11,6 +11,9 @@ export declare class ElRadio extends ElementUIComponent {
   /** Whether radio is disabled */
   disabled: boolean
 
+  /** Whether to add a border around Radio */
+  border: boolean
+
   /** Native 'name' attribute */
   name: string
 }

types/rate.d.ts

@@ -38,6 +38,9 @@ export declare class ElRate extends ElementUIComponent {
   /** Whether to display texts */
   showText: boolean
 
+  /** Whether to display current score. show-score and show-text cannot be true at the same time */
+  showScore: boolean
+
   /** Color of texts */
   textColor: string
 
@@ -45,5 +48,5 @@ export declare class ElRate extends ElementUIComponent {
   texts: string[]
 
   /** Text template when the component is read-only */
-  textTemplate: string
+  scoreTemplate: string
 }

types/row.d.ts

@@ -17,6 +17,9 @@ export declare class ElRow extends ElementUIComponent {
   /** Horizontal alignment of flex layout */
   justify: HorizontalAlignment
 
-  /** vertical alignment of flex layout */
+  /** Vertical alignment of flex layout */
   align: VertialAlignment
+
+  /** Custom element tag */
+  tag: string
 }

types/select.d.ts

@@ -18,6 +18,9 @@ export declare class ElSelect extends ElementUIComponent {
   /** Whether Select is disabled */
   disabled: boolean
 
+  /** Unique identity key name for value, required when value is an object */
+  valueKey: string
+
   /** Size of Input */
   size: ElementUIComponentSize
 
@@ -40,13 +43,13 @@ export declare class ElSelect extends ElementUIComponent {
   allowCreate: boolean
 
   /** Custom filter method */
-  filterMethod: AlterItemsEventHandler
+  filterMethod: QueryChangeHandler
 
   /** Whether options are loaded from server */
   remote: boolean
 
   /** Custom remote search method */
-  remoteMethod: AlterItemsEventHandler
+  remoteMethod: QueryChangeHandler
 
   /** Whether Select is loading data from server */
   loading: boolean
@@ -62,4 +65,7 @@ export declare class ElSelect extends ElementUIComponent {
 
   /** Custom class name for Select's dropdown */
   popperClass: string
+
+  /** Select first matching option on enter key. Use with filterable or remote */
+  defaultFirstOption: boolean
 }

types/slider.d.ts

@@ -1,5 +1,15 @@
 import { ElementUIComponent } from './component'
 
+export interface SliderTooltipFormat {
+  /**
+   * Format the displayed value of Slider
+   *
+   * @param value Value of the Slider
+   * @returns formatted value
+   */
+  (value: number): string
+}
+
 /** Slider Component */
 export declare class ElSlider extends ElementUIComponent {
   /** Current value of the slider */
@@ -20,6 +30,9 @@ export declare class ElSlider extends ElementUIComponent {
   /** Whether to display an input box, works when range is false */
   showInput: boolean
 
+  /** Format of displayed tooltip value */
+  formatTooltip: SliderTooltipFormat
+
   /** Whether to display control buttons when show-input is true */
   showInputControls: boolean
 
@@ -31,4 +44,13 @@ export declare class ElSlider extends ElementUIComponent {
 
   /** Whether to select a range */
   range: boolean
+
+  /** Vertical mode */
+  vertical: boolean
+
+  /** Slider height, required in vertical mode */
+  height: boolean
+
+  /** Debounce delay when typing, in milliseconds, works when show-input is true */
+  debounce: number
 }

types/step.d.ts

@@ -1,6 +1,5 @@
 import { VNode } from 'vue'
 import { ElementUIComponent } from './component'
-import { ElementUIIcon } from './icon'
 
 export type StepStatus = 'wait' | 'process' | 'finish' | 'error' | 'success'
 
@@ -26,7 +25,7 @@ export declare class ElStep extends ElementUIComponent {
   description: string
 
   /** Step icon */
-  icon: ElementUIIcon
+  icon: string
 
   /** Current status. It will be automatically set by Steps if not configured. */
   status: StepStatus

types/steps.d.ts

@@ -23,6 +23,6 @@ export declare class ElSteps extends ElementUIComponent {
   /** Whether step description is centered */
   alignCenter: boolean
 
-  /** Center whole Steps component */
+  /** Whether to apply simple theme */
-  center: boolean
+  simple: boolean
 }

types/switch.d.ts

@@ -12,22 +12,28 @@ export declare class ElSwitch extends ElementUIComponent {
   width: number
 
   /** Class name of the icon displayed when in on state, overrides on-text */
-  onCloseIcon: string
+  trueIconClass: string
 
   /** Class name of the icon displayed when in off state, overrides off-text */
-  offCloseIcon: string
+  falseIconClass: string
 
   /** Text displayed when in on state */
-  onText: string
+  trueText: string
 
   /** Text displayed when in off state */
-  offText: string
+  falseText: string
 
   /** Background color when in on state */
-  onColor: string
+  trueColor: string
 
   /** Background color when in off state */
-  offColor: string
+  falseColor: string
+
+  /** Switch value when in on state */
+  trueValue: string | boolean | number
+
+  /** Switch value when in off state */
+  falseValue: string | boolean | number
 
   /** Input name of Switch */
   name: string

types/table-column.d.ts

@@ -1,11 +1,23 @@
 import { CreateElement, VNode } from 'vue'
 import { ElementUIComponent, ElementUIHorizontalAlignment } from './component'
+import { PopoverPlacement } from './popover'
 
 export type TableColumnType = 'default' | 'selection' | 'index' | 'expand'
 export type TableColumnFixedType = 'left' | 'right'
 
-// TODO: complete type here
+export type TableColumn = {
-export type TableColumn = any
+  /** Label of the column */
+  label: string,
+
+  /** Property name of the source data */
+  property: string,
+
+  /** Type of the column */
+  type: string,
+
+  /** Whether column is fixed at left/right */
+  fixed: boolean | string
+}
 
 /** Data used in renderHeader function */
 export interface RenderHeaderData {
@@ -87,13 +99,15 @@ export declare class ElTableColumn extends ElementUIComponent {
   /** An array of data filtering options */
   filters: TableColumnFilter[]
 
+  /** Placement for the filter dropdown */
+  filterPlacement: PopoverPlacement
+
   /** Whether data filtering supports multiple options */
   filterMultiple: Boolean
 
   /** Data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` */
   filterMethod: (value: any, row: object) => boolean
 
-  // TODO: complete type here
   /** Filter value for selected data, might be useful when table header is rendered with `render-header` */
-  filteredValue: any[]
+  filteredValue: TableColumnFilter[]
 }

types/table.d.ts

@@ -12,6 +12,11 @@ export interface DefaultSortOptions {
   order: SortOrder
 }
 
+export interface SummaryMethodParams {
+  columns: object[],
+  data: object
+}
+
 /** Table Component */
 export declare class ElTable extends ElementUIComponent {
   /** Table data */
@@ -65,6 +70,15 @@ export declare class ElTable extends ElementUIComponent {
   /** Tooltip effect property */
   tooltipEffect: TooltipEffect
 
+  /** Whether to display a summary row */
+  showSummary: boolean
+
+  /** Displayed text for the first column of summary row */
+  sumText: string
+
+  /** Custom summary method */
+  summaryMethod: (param: SummaryMethodParams) => any[]
+
   /** Clear selection. Might be useful when `reserve-selection` is on */
   clearSelection (): void
 
@@ -75,4 +89,11 @@ export declare class ElTable extends ElementUIComponent {
    * @param selected Whether the row is selected. The selected state will be toggled if not set
    */
   toggleRowSelection (row: object, selected?: boolean): void
+
+  /**
+   * Set a certain row as selected
+   *
+   * @param row The row that is going to set as selected
+   */
+  setCurrentRow (row?: object): void
 }

types/tabs.d.ts

@@ -1,6 +1,7 @@
 import { ElementUIComponent } from './component'
 
 export type TabType = 'card' | 'border-card'
+export type TabPosition = 'top' | 'right' | 'bottom' | 'left'
 
 /** Divide data collections which are related yet belong to different types */
 export declare class ElTabs extends ElementUIComponent {
@@ -18,4 +19,7 @@ export declare class ElTabs extends ElementUIComponent {
 
   /** Name of the selected tab */
   value: string
+
+  /** Position of tabs */
+  tabPosition: TabPosition
 }

types/tag.d.ts

@@ -1,4 +1,4 @@
-import { ElementUIComponent } from './component'
+import { ElementUIComponent, ElementUIComponentSize } from './component'
 
 export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger'
 
@@ -11,11 +11,14 @@ export declare class ElTag extends ElementUIComponent {
   closable: boolean
 
   /** Whether the removal animation is disabled */
-  closeTransition: boolean
+  disableTransitions: boolean
 
   /** Whether Tag has a highlighted border */
   hit: boolean
 
   /** Background color of the tag */
   color: string
+
+  /** Tag size */
+  size: ElementUIComponentSize
 }

types/time-picker.d.ts

@@ -51,6 +51,15 @@ export declare class ElTimePicker extends ElementUIComponent {
   /** Placeholder */
   placeholder: string
 
+  /** Placeholder for the start time in range mode */
+  startPlaceholder: string
+
+  /** Placeholder for the end time in range mode */
+  endPlaceholder: string
+
+  /** Whether to pick a time range, only works with <el-time-picker> */
+  isRange: boolean
+
   /** Value of the picker */
   value: string | Date
 
@@ -62,4 +71,7 @@ export declare class ElTimePicker extends ElementUIComponent {
 
   /** Additional options, check the table below */
   pickerOptions: object
+
+  /** Range separator */
+  rangeSeparator: string
 }

types/tooltip.d.ts

@@ -30,7 +30,7 @@ export declare class ElTooltip extends ElementUIComponent {
   visibleArrow: boolean
 
   /** Popper.js parameters */
-  options: object
+  popperOptions: object
 
   /** Delay of appearance, in millisecond */
   openDelay: number
@@ -40,4 +40,10 @@ export declare class ElTooltip extends ElementUIComponent {
 
   /** Custom class name for Tooltip's popper */
   popperClass: string
+
+  /** Whether the mouse can enter the tooltip	 */
+  enterable: string
+
+  /** Timeout in milliseconds to hide tooltip */
+  hideAfter: string
 }

types/transfer.d.ts

@@ -0,0 +1,65 @@
+import { CreateElement, VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export interface TransferData {
+  key: any,
+  label: string,
+  disabled: boolean
+}
+
+export interface TransferFormat {
+  noChecked: string,
+  hasChecked: string,
+}
+
+export interface TransferProps {
+  key: string,
+  label: string,
+  disabled: string
+}
+
+export interface TransferRenderContent {
+  /**
+   * Render function for a specific option
+   *
+   * @param h The render function
+   * @param option The option data object
+   */
+  (h: CreateElement, option: TransferData): VNode
+}
+
+/** Transfer Component */
+export declare class ElTransfer extends ElementUIComponent {
+  /** Data source */
+  data: TransferData[]
+
+  /** Whether Transfer is filterable */
+  filterable: boolean
+
+  /** Placeholder for the filter input */
+  filterPlaceholder: string
+
+  /** Custom filter method */
+  filterMethod: (query: string, item: TransferData) => boolean
+
+  /** Custom list titles */
+  titles: string[]
+
+  /** Custom button texts */
+  buttonTexts: string[]
+
+  /** Custom render function for data items */
+  renderContent: TransferRenderContent
+
+  /** Texts for checking status in list header */
+  format: TransferFormat
+
+  /** Prop aliases for data source */
+  props: TransferProps
+
+  /** Key array of initially checked data items of the left list */
+  leftDefaultChecked: any[]
+
+  /** Key array of initially checked data items of the right list */
+  rightDefaultChecked: any[]
+}

types/tree.d.ts

@@ -1,10 +1,12 @@
 import { CreateElement, VNode } from 'vue'
 import { ElementUIComponent } from './component'
+import {Tree} from "./index";
 
 /** The node of the tree */
 export interface TreeNode {
   id?: any,
   label?: string,
+  isLeaf?: boolean,
   children?: TreeNode[]
 }
 
@@ -19,8 +21,14 @@ export interface RenderContent {
 }
 
 export interface FilterNodeMethod {
-  // TODO: complete type and description here
+  /**
-  (value: any, data: TreeNode, node: any): boolean
+   * Filter method for each node
+   *
+   * @param value The query string
+   * @param data The original data object
+   * @param node Tree node
+   */
+  (value: string, data: TreeNode, node: any): boolean
 }
 
 /** Tree Component */
@@ -46,9 +54,6 @@ export declare class ElTree extends ElementUIComponent {
   /** Whether current node is highlighted */
   highlightCurrent: boolean
 
-  /** Key of current node, a set only prop */
-  currentNodeKey: string | number
-
   /** Whether to expand all nodes by default */
   defaultExpandAll: boolean
 
@@ -124,4 +129,28 @@ export declare class ElTree extends ElementUIComponent {
    * @param deep Indicating whether to checked state deeply or not
    */
   setChecked (data: TreeNode | any, checked: boolean, deep: boolean)
+
+  /**
+   * Return the highlight node's key (null if no node is highlighted)
+   */
+  getCurrentKey (): any
+
+  /**
+   * Set highlighted node by key, only works when node-key is assigned
+   *
+   * @param key The node's key to be highlighted
+   */
+  setCurrentKey (key: any): void
+
+  /**
+   * Return the highlight node (null if no node is highlighted)
+   */
+  getCurrentNode (): TreeNode
+
+  /**
+   * Set highlighted node, only works when node-key is assigned
+   *
+   * @param node The node to be highlighted
+   */
+  setCurrentNode (node: TreeNode): void
 }

types/upload.d.ts

@@ -1,4 +1,3 @@
-// TODO: need to check if the api matches
 import { ElementUIComponent } from './component'
 
 export type ListType = 'text' | 'picture' | 'picture-card'
@@ -56,7 +55,7 @@ export declare class ElUpload extends ElementUIComponent {
   withCredentials: boolean
 
   /** Whether to show the uploaded file list */
-  showUploadList: boolean
+  showFileList: boolean
 
   /** Whether to activate drag and drop mode */
   drag: boolean
@@ -99,4 +98,13 @@ export declare class ElUpload extends ElementUIComponent {
 
   /** Override default xhr behavior, allowing you to implement your own upload-file's request */
   httpRequest: (options: HttpRequestOptions) => void
+
+  /** Whether to disable upload */
+  disabled: boolean
+
+  /** Maximum number of uploads allowed */
+  limit: number
+
+  /** Hook function when limit is exceeded */
+  onExceed: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
 }