update typings

2017-10-18 18:31:03 +08:00 · 2017-10-18 18:31:03 +08:00 · 1e95e51f9b
parent 4f9515494c
commit 1e95e51f9b
91 changed files with 740 additions and 233 deletions
--- a/CHANGELOG.en-US.md
+++ b/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`
--- a/CHANGELOG.zh-CN.md
+++ b/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` 自定义列模板的功能
--- a/examples/docs/en-US/breadcrumb.md
+++ b/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|
--- a/examples/docs/en-US/cascader.md
+++ b/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 |
--- a/examples/docs/en-US/checkbox.md
+++ b/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    |       —        |     —    |
--- a/examples/docs/en-US/dropdown.md
+++ b/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 |
--- a/examples/docs/en-US/form.md
+++ b/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 |
--- a/examples/docs/en-US/input-number.md
+++ b/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: {
--- a/examples/docs/en-US/input.md
+++ b/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"
-  icon="edit"
-  :on-icon-click="handleIconClick">
+  @select="handleSelect">
+  <i
+    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 |
-|value| binding value | string/number| — | — |
+|type| type of input | string | text / textarea | text |
+|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 |
--- a/examples/docs/en-US/menu.md
+++ b/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   |
--- a/examples/docs/en-US/message-box.md
+++ b/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 | — | — |
--- a/examples/docs/en-US/message.md
+++ b/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 |
--- a/examples/docs/en-US/progress.md
+++ b/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.
--- a/examples/docs/en-US/slider.md
+++ b/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 | — | — |
-| label | label for screen reader | String | — | — |
+| height | Slider height, required in vertical mode | string | — | — |
+| label | label for screen reader | string | — | — |
 |debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |

 ## Events
--- a/examples/docs/en-US/switch.md
+++ b/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"
-  off-color="#ff4949">
+  true-color="#13ce66"
+  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"
-  off-text="Pay by year">
+  true-text="Pay by month"
+  false-text="Pay by year">
 </el-switch>
 <el-switch
  style="display: block"
  v-model="value4"
-  on-color="#13ce66"
-  off-color="#ff4949"
-  on-text="Pay by month"
-  off-text="Pay by year">
+  true-color="#13ce66"
+  false-color="#ff4949"
+  true-text="Pay by month"
+  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"
-    off-color="#ff4949"
-    on-value="100"
-    off-value="0">
+    true-color="#13ce66"
+    false-color="#ff4949"
+    true-value="100"
+    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 | — | —
-off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
-on-text | text displayed when in `on` state | string | — | —
-off-text | text displayed when in `off` state | string | — | —
-on-value  | switch value when in `on` state | boolean / string / number | — | true
-off-value  | switch value when in `off` state | boolean / string / number | — | false
-on-color | background color when in `on` state | string | — | #409EFF
-off-color | background color when in `off` state | string | — | #C0CCDA
+true-icon-class | class name of the icon displayed when in `on` state, overrides `true-text` | string | — | —
+false-icon-class |class name of the icon displayed when in `off` state, overrides `false-text`| string | — | —
+true-text | text displayed when in `on` state | string | — | —
+false-text | text displayed when in `off` state | string | — | —
+true-value  | switch value when in `on` state | boolean / string / number | — | true
+false-value  | switch value when in `off` state | boolean / string / number | — | false
+true-color | background color when in `on` state | string | — | #409EFF
+false-color | background color when in `off` state | string | — | #C0CCDA
 name| input name of Switch | string | — | —

 ### Events
--- a/examples/docs/en-US/table.md
+++ b/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>
--- a/examples/docs/en-US/tabs.md
+++ b/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 |

--- a/examples/docs/en-US/transition.md
+++ b/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'
--- a/examples/docs/zh-CN/cascader.md
+++ b/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
 | 事件名称      | 说明    | 回调参数      |
--- a/examples/docs/zh-CN/dropdown.md
+++ b/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 |
--- a/examples/docs/zh-CN/form.md
+++ b/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">
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@ -543,9 +543,12 @@ export default {
  v-model="state3"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
-  @select="handleSelect"
-  icon="edit"
-  :on-icon-click="handleIconClick">
+  @select="handleSelect">
+  <i
+    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 |
-| value         | 绑定值           | string, number  | — | — |
+| type         | 类型   | string  | text / textarea | text |
+| 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
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
--- a/examples/docs/zh-CN/menu.md
+++ b/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 |
--- a/examples/docs/zh-CN/message-box.md
+++ b/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 实例 | — | — |
--- a/examples/docs/zh-CN/message.md
+++ b/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 |
--- a/examples/docs/zh-CN/slider.md
+++ b/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 | — | — |
-| label | 屏幕阅读器标签 | String | — | — |
+| height | Slider 高度，竖向模式时必填 | string | — | — |
+| label | 屏幕阅读器标签 | string | — | — |
 | debounce | 输入时的去抖延迟，毫秒，仅在`show-input`等于true时有效 | number | — | 300 |

 ### Events
--- a/examples/docs/zh-CN/switch.md
+++ b/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"
-  off-color="#ff4949">
+  true-color="#13ce66"
+  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="按月付费"
-  off-text="按年付费">
+  true-text="按月付费"
+  false-text="按年付费">
 </el-switch>
 <el-switch
  style="display: block"
  v-model="value4"
-  on-color="#13ce66"
-  off-color="#ff4949"
-  on-text="按月付费"
-  off-text="按年付费">
+  true-color="#13ce66"
+  false-color="#ff4949"
+  true-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"
-    off-color="#ff4949"
-    on-value="100"
-    off-value="0">
+    true-color="#13ce66"
+    false-color="#ff4949"
+    true-value="100"
+    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   | — | — |
-| off-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text`    | string   | — | — |
-| on-text  | switch 打开时的文字描述    | string   | — | — |
-| off-text  | switch 关闭时的文字描述    | string   | — | — |
-| on-value  | switch 打开时的值    | boolean / string / number | — | true |
-| off-value  | switch 关闭时的值    | boolean / string / number | — | false |
-| on-color  | switch 打开时的背景色    | string   | — | #409EFF |
-| off-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
+| true-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `true-text`    | string   | — | — |
+| false-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `false-text`    | string   | — | — |
+| true-text  | switch 打开时的文字描述    | string   | — | — |
+| false-text  | switch 关闭时的文字描述    | string   | — | — |
+| true-value  | switch 打开时的值    | boolean / string / number | — | true |
+| false-value  | switch 关闭时的值    | boolean / string / number | — | false |
+| true-color  | switch 打开时的背景色    | string   | — | #409EFF |
+| false-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
 | name  | switch 对应的 name 属性    | string   | — | — |

 ### Events
--- a/examples/docs/zh-CN/table.md
+++ b/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>
--- a/examples/docs/zh-CN/tabs.md
+++ b/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 |

--- a/examples/docs/zh-CN/transition.md
+++ b/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'
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/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
--- a/packages/select/src/select.vue
+++ b/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');
          }
--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@ -13,34 +13,35 @@
      @change="handleChange"
      ref="input"
      :name="name"
-      :true-value="onValue"
-      :false-value="offValue"
+      :true-value="trueValue"
+      :false-value="falseValue"
      :disabled="disabled"
      @keydown.enter="switchValue"
    >
    <span
      :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
-      v-if="offIconClass || offText">
-      <i :class="[offIconClass]" v-if="offIconClass"></i>
-      <span v-if="!offIconClass && offText" :aria-hidden="checked">{{ offText }}</span>
+      v-if="falseIconClass || falseText">
+      <i :class="[falseIconClass]" v-if="falseIconClass"></i>
+      <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">
-      <i :class="[onIconClass]" v-if="onIconClass"></i>
-      <span v-if="!onIconClass && onText" :aria-hidden="!checked">{{ onText }}</span>
+      v-if="trueIconClass || trueText">
+      <i :class="[trueIconClass]" v-if="trueIconClass"></i>
+      <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,
-      offText: String,
-      onColor: {
+      trueText: String,
+      falseText: String,
+      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)) {
-        this.$emit('input', this.offValue);
+      if (!~[this.trueValue, this.falseValue].indexOf(this.value)) {
+        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('change', !this.checked ? this.onValue : this.offValue);
+        this.$emit('input', !this.checked ? this.trueValue : this.falseValue);
+        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;
--- a/packages/theme-chalk/src/select.scss
+++ b/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;
--- a/src/mixins/migrating.js
+++ b/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]}`);
      }
    }
  },
--- a/test/unit/specs/switch.spec.js
+++ b/test/unit/specs/switch.spec.js
@ -10,10 +10,10 @@ describe('Switch', () => {

  it('create', () => {
    vm = createTest(Switch, {
-      onText: 'on',
-      offText: 'off',
-      onColor: '#0f0',
-      offColor: '#f00',
+      trueText: 'on',
+      falseText: 'off',
+      trueColor: '#0f0',
+      falseColor: '#f00',
      width: 100
    });

@ -25,8 +25,8 @@ describe('Switch', () => {

  it('switch with icons', () => {
    vm = createTest(Switch, {
-      onIconClass: 'el-icon-check',
-      offIconClass: 'el-icon-close'
+      trueIconClass: 'el-icon-check',
+      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() {
--- a/types/alert.d.ts
+++ b/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

--- a/types/aside.d.ts
+++ b/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
+}
--- a/types/autocomplete.d.ts
+++ b/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
 }
--- a/types/breadcrumb.d.ts
+++ b/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
 }
--- a/types/button.d.ts
+++ b/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
--- a/types/carousel-item.d.ts
+++ b/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
 }
--- a/types/carousel.d.ts
+++ b/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
--- a/types/cascader.d.ts
+++ b/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
 }
--- a/types/checkbox-button.d.ts
+++ b/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
+}
--- a/types/checkbox-group.d.ts
+++ b/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
+}
--- a/types/checkbox.d.ts
+++ b/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

--- a/types/col.d.ts
+++ b/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
 }
--- a/types/color-picker.d.ts
+++ b/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
 }
--- a/types/component.d.ts
+++ b/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'
--- a/types/container.d.ts
+++ b/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'
+}
--- a/types/date-picker.d.ts
+++ b/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
 }
--- a/types/dialog.d.ts
+++ b/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 */
-  size: DialogSize
+  /** Width of Dialog */
+  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 ()
 }
--- a/types/dropdown-item.d.ts
+++ b/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
--- a/types/dropdown.d.ts
+++ b/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 */
-  menuAlign: DropdownMenuAlignment
+  /** Placement of the menu */
+  placement: DropdownMenuAlignment

  /** How to trigger */
  trigger: DropdownMenuTrigger
--- a/types/footer.d.ts
+++ b/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
+}
--- a/types/form-item.d.ts
+++ b/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
 }
--- a/types/form.d.ts
+++ b/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
--- a/types/header.d.ts
+++ b/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
+}
--- a/types/icon.d.ts
+++ b/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
-}
--- a/types/index.d.ts
+++ b/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 */
-  export class Icon extends ElIcon {}
+  /** Header Component */
+  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 {}

--- a/types/input-number.d.ts
+++ b/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
 }
--- a/types/input.d.ts
+++ b/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: string
+  /** Type of input */
+  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 */
-  icon: string
+  /** Prefix icon class */
+  prefixIcon: string
+
+  /** Suffix icon class */
+  suffixIcon: string

  /** Number of rows of textarea, only works when type is 'textarea' */
  rows: number
--- a/types/loading.d.ts
+++ b/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
 }
--- a/types/main.d.ts
+++ b/types/main.d.ts
@ -0,0 +1,4 @@
+import { ElementUIComponent } from './component'
+
+/** Main Component */
+export declare class ElMain extends ElementUIComponent {}
--- a/types/menu-item.d.ts
+++ b/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
 }
--- a/types/menu.d.ts
+++ b/types/menu.d.ts
@ -8,8 +8,17 @@ export declare class ElMenu extends ElementUIComponent {
  /** Menu display mode */
  mode: MenuDisplayMode

-  /** Theme color */
-  theme: MenuTheme
+  /** Whether the menu is collapsed (available only in vertical mode) */
+  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
--- a/types/message-box.d.ts
+++ b/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

--- a/types/message.d.ts
+++ b/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
 }
--- a/types/notification.d.ts
+++ b/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
 }
--- a/types/pagination.d.ts
+++ b/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
 }
--- a/types/popover.d.ts
+++ b/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
 }
--- a/types/radio-button.d.ts
+++ b/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
 }
--- a/types/radio-group.d.ts
+++ b/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
 }
--- a/types/radio.d.ts
+++ b/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
 }
--- a/types/rate.d.ts
+++ b/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
 }
--- a/types/row.d.ts
+++ b/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
 }
--- a/types/select.d.ts
+++ b/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
 }
--- a/types/slider.d.ts
+++ b/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
 }
--- a/types/step.d.ts
+++ b/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
--- a/types/steps.d.ts
+++ b/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 */
-  center: boolean
+  /** Whether to apply simple theme */
+  simple: boolean
 }
--- a/types/switch.d.ts
+++ b/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
--- a/types/table-column.d.ts
+++ b/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 = any
+export type TableColumn = {
+  /** 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[]
 }
--- a/types/table.d.ts
+++ b/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
 }
--- a/types/tabs.d.ts
+++ b/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
 }
--- a/types/tag.d.ts
+++ b/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
 }
--- a/types/time-picker.d.ts
+++ b/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
 }
--- a/types/tooltip.d.ts
+++ b/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
 }
--- a/types/transfer.d.ts
+++ b/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[]
+}
--- a/types/tree.d.ts
+++ b/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
 }
--- a/types/upload.d.ts
+++ b/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
 }