[release] 1.0.7

* DatePicker: fix clear button, fixed #1690

* DatePicker: fix reset button style

* DatePicker: fix set value

* DatePicker: fix test

CHANGELOG.en-US.md

@@ -1,5 +1,44 @@
 ## Changelog
 
+### 1.0.7
+
+*2016-12-14*
+
+- Fixed DatePicker dropdown appears when hovering on the clear button
+- Fixed DatePicker displays a wrong date when its initial value is null
+- Added `row-contextmenu` event and `max-height` attribute for Table, #1663 #1674
+- Added `customClass` attribute for MessageBox, #1707
+- Added `iconClass` and `customClass` attributes for Message and Notification, #1671
+- Added empty slot for Table, #1737
+- Added old value as a second parameter in change event for InputNumber
+
+### 1.0.6
+
+*2016-12-09*
+
+- Added `disabled` attribute for Tabs, #1620
+- Added `size` attribute for DatePicker input, #1440
+- Fixed `datetimerange` DatePicker's panel not showing correct date if initial value is present, #1129
+- Fixed DatePicker display error when switching year, #1607
+- Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604
+- Fixed TimePicker not refreshing value after clicking the clear button, #1583
+- Fixed remote filterable Select display error when its value is an object, #1593
+- Fixed Select's clear button still working bug when it's `disabled`, #1619
+- Fixed Switch's background color error when its `disabled` attribute is dynamically changed, #1627
+- Fixed some style bugs of Table
+
+### 1.0.5
+
+*2016-12-06*
+
+- Fixed Select with async options and binding value displaying value instead of label, #1537
+- Fixed Select reports an error when initial binding value is an empty object, #1533
+- Fixed remote filtering Select not showing dropdown in some conditions, #1531
+- Fixed Slider sometimes drifting a small distance after releasing dragging, #1546
+- Fixed Steps style in IE9, #1543
+- Added Upload generating URL for all file types, #1530
+- Fixed TimeSelect style, removed flexbox, #1335
+
 ### 1.0.4
 
 *2016-12-02*

CHANGELOG.zh-CN.md

@@ -1,5 +1,41 @@
 ## 更新日志
 
+### 1.0.7
+*2016-12-14*
+
+- 修复 DatePicker 在有值的情况下 hover 清空按钮时会错误地显示弹框
+- 修复 DatePicker 设置默认值为 null 会错误地显示时间值
+- 新增 Table 的 `row-contextmenu` 事件和 `max-height` 属性，#1663 #1674
+- 新增 MessageBox 的 `customClass` 属性，#1707
+- 新增 Message 和 Notification 的 `iconClass` 和 `customClass` 属性，#1671
+- 新增 Table 支持 empty slot，#1737
+- 改进 InputNumber change 事件增加 old value 的参数
+
+### 1.0.6
+*2016-12-09*
+
+- 新增 Tabs 组件的 `disabled` 属性，#1620
+- 新增 DatePicker 的 input 支持 `size`，#1440
+- 修复 DatePicker 为 `datetimerange` 类型并设置初始值时，面板未显示正确日期的问题，#1129
+- 修复 DatePicker 切换年份时显示异常的问题，#1607
+- 修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604
+- 修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583
+- 修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593
+- 修复 Select 为 `disabled` 时，`clearable` 仍然可以工作的问题，#1619
+- 修复 自定义背景颜色的 Switch 在动态切换 `disabled` 时，背景颜色错误的问题，#1627
+- 修复 Table 的一些样式问题
+
+### 1.0.5
+*2016-12-06*
+
+- 修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537
+- 修复 Select 的初始值为一个空对象时会报错的问题，#1533
+- 修复 Select 远程搜索有时不显示下拉框的问题，#1531
+- 修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546
+- 修复 IE9 下 Steps 的样式问题，#1543
+- 新增 Upload 对所有文件类型生成 URL 的功能，#1530
+- 修复 TimeSelect 的样式，移除 flexbox, #1335
+
 ### 1.0.4
 *2016-12-02*
 

README.md

@@ -1,3 +1,6 @@
+<p align="center">
+  <img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg">
+</p>
 # Element
 [![Build Status](https://travis-ci.org/ElemeFE/element.svg?branch=master)](https://travis-ci.org/ElemeFE/element)
 [![Coverage Status](https://coveralls.io/repos/github/ElemeFE/element/badge.svg?branch=master)](https://coveralls.io/github/ElemeFE/element?branch=master)
@@ -13,6 +16,7 @@
 ## Links
 - [Home Page](http://element.eleme.io/)
 - [Docs](http://element.eleme.io/#/component)
+- [awesome-element](https://github.com/ElementUI/awesome-element)
 - [FAQ](./FAQ.md)
 - [Customize Theme](http://element.eleme.io/#/en-US/component/custom-theme)
 - Starter Kit
@@ -66,5 +70,22 @@ We have collected some [frequently asked questions](https://github.com/ElemeFE/e
 ## Contribution
 Please make sure to read the [Contributing Guide](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md) before making a pull request.
 
+## Special Thanks
+English documentation is brought to you by SwiftGG Translation Team. Our special thanks go to these fellows:
+- [raychenfj](https://github.com/raychenfj)
+- [kevin](http://thekevin.cn/)
+- [曾小涛](https://github.com/zengxiaotao)
+- [湾仔王二](https://github.com/wanzaiwanger)
+- [BlooDLine](http://www.ibloodline.com/)
+- [陈铭嘉](https://chenmingjia.github.io/)
+- [千叶知风](http://mpc6.com/)
+- [梁杰](http://numbbbbb.com)
+- [Changing](https://github.com/sunzhuo11)
+- [mmoaay](https://github.com/mmoaay)
+
+## Donation
+If you find Element useful, you can buy us a cup of coffee
+<img width="650" src="http://fuss10.elemecdn.com/2/d0/ab1b8e5a1d96bcdcd6092ce0c66ecjpeg.jpeg" alt="">
+
 ## LICENSE
 MIT

build/cooking.demo.js

@@ -29,6 +29,7 @@ cooking.set({
   publicPath: process.env.CI_ENV || '',
   hash: true,
   devServer: {
+    hostname: '0.0.0.0',
     port: 8085,
     log: false,
     publicPath: '/'

build/deploy-ci.sh

@@ -38,8 +38,11 @@ if [ "$TRAVIS_TAG" ]; then
   cd temp_web
   git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
   # build sub folder
-  export SUB_FOLDER=$(echo $TRAVIS_TAG | grep -o -E '\d+\.\d+')
+  echo $TRAVIS_TAG
+  export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
+  echo $SUB_FOLDER
 
+  SUB_FOLDER='1.0'
   mkdir $SUB_FOLDER
   rm -rf *.js *.css *.map static
   rm -rf $SUB_FOLDER/**

examples/docs/en-US/button.md

@@ -142,8 +142,9 @@ Besides default size, Button component provides three additional sizes for you t
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | button size   | string  |   large/small/mini            |    —     |
 | type     | button type   | string    |   primary/success/warning/danger/info/text |     —    |
-| plain     | determine whether it's a plain button   | Boolean    | true,false | false   |
-| disabled  | disable the button    | boolean   | true, false   | false   |
+| plain     | determine whether it's a plain button   | Boolean    | — | false   |
+| loading   | determine whether it's loading   | Boolean    | — | false   |
+| disabled  | disable the button    | boolean   | —   | false   |
 | icon  | button icon, accepts an icon name of Element icon component | string   |  —  |  —  |
 | autofocus  | same as native button's `autofocus` | boolean   |  —  |  false  |
 | native-type | same as native button's `type` | string | button/submit/reset | button |

examples/docs/en-US/date-picker.md

@@ -254,10 +254,11 @@ Picking a date range is supported.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | - | false |
+|size | size of Input | string | large/small/mini | — |
 | editable | whether the input is editable | boolean | - | true |
 | placeholder | placeholder | string | — | — |
-| type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`, <br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
+| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | picker-options | additional options, check the table below | object | — | {} |
 
@@ -271,4 +272,4 @@ Picking a date range is supported.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | text | title of the shortcut | string | — | — |
-| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. <br>You can change the picker value by emitting the `pick` event.<br> Example: `vm.$emit('pick', new Date())`| function | — | — |
+| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |

examples/docs/en-US/datetime-picker.md

@@ -210,9 +210,10 @@ Select date and time in one picker.
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | - | false |
 | editable | whether the input is editable | boolean | - | true |
+|size | size of Input | string | large/small/mini | — |
 | placeholder | placeholder | string | — | — |
-| type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`, <br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
+| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | picker-options | additional options, check the table below | object | — | {} |
 
@@ -226,4 +227,4 @@ Select date and time in one picker.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | text | title of the shortcut | string | — | — |
-| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. <br>You can change the picker value by emitting the `pick` event.<br> Example: `vm.$emit('pick', new Date())`| function | — | — |
+| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |

examples/docs/en-US/form.md

@@ -537,7 +537,7 @@ Form component allows you to verify your data, helping you find and correct erro
       </el-form-item>
     </el-col>
   </el-form-item>
-  <el-form-item label="Instant delivery">
+  <el-form-item label="Instant delivery" prop="delivery">
     <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="Activity type" prop="type">
@@ -766,7 +766,7 @@ Form component allows you to verify your data, helping you find and correct erro
     },
     methods: {
       handleSubmit3(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+        this.$refs.dynamicForm.validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {

examples/docs/en-US/i18n.md

@@ -26,13 +26,13 @@ Vue.component(Button.name, Button)
 Vue.component(Select.name, Select)
 ```
 
-The Chinese language pack is imported by default, even if you're using another language. But with `IgnorePlugin` provided by webpack you can ignore it when building:
+The Chinese language pack is imported by default, even if you're using another language. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale:
 
 webpack.config.js
 ```javascript
 {
   plugins: [
-    new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/)
+    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
   ]
 }
 ```
@@ -51,6 +51,13 @@ Currently Element ships with the following languages:
   <li>Italian (it)</li>
   <li>Korean (ko)</li>
   <li>Japanese (ja)</li>
+  <li>Dutch (nl)</li>
+  <li>Vietnamese (vi)</li>
+  <li>Russian (ru-RU)</li>
+  <li>Turkish (tr-TR)</li>
+  <li>Brazilian Portuguese (pt-br)</li>
+  <li>Farsi (fa)</li>
+  <li>Thai (th)</li>
 </ul>
 
 If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.

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

@@ -244,7 +244,9 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title of the MessageBox | string | — | — |
 | message | content of the MessageBox | string | — | — |
-| type | message type, used for icon display | string | success/info/<br>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' | — | — |
 | lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
 | showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |
 | showConfirmButton | whether to show a confirm button | boolean | — | true |

examples/docs/en-US/message.md

@@ -197,6 +197,8 @@ In this case you should call `Message(options)`. We have also registered methods
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | message | message text | string | — | — |
 | type | message type | string | success/warning/info/error | info |
+| iconClass | custom icon's class, overrides `type` | string | — | — |
+| 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 |
 | onClose | callback function when closed with the message instance as the parameter | function | — | — |

examples/docs/en-US/notification.md

@@ -222,6 +222,8 @@ In this case you should call `Notification(options)`. We have also registered me
 | title | title | string | — | — |
 | message | description text | string | — | — |
 | type | notification type | string | success/warning/info/error | — |
+| iconClass | custom icon's class. It will be overridden by `type` | string | — | — |
+| customClass | custom class name for Notification | string | — | — |
 | duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
 | onClose | callback function when closed | function | — | — |
 | offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |

examples/docs/en-US/rate.md

@@ -141,7 +141,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
 | colors | color array for icons. It should have 3 elements, each of which corresponds with a score level  | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
 | void-color | color of unselected icons | string | — | #C6D1DE |
 | disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
-| icon-classes |  array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
+| icon-classes |  array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
 | disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
 | show-text | whether to display texts | boolean | — | false |

examples/docs/en-US/select.md

@@ -626,6 +626,7 @@ Create and select new items that are not included in select options
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | multiple | whether multiple-select is activated | boolean | — | false |
 | disabled | whether Select is disabled | boolean | — | false |
+| size | size of Input | string | large/small/mini | — |
 | clearable | whether single select can be cleared | boolean | — | false |
 | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
 | name | the name attribute of select input | string | — | — |

examples/docs/en-US/steps.md

@@ -126,7 +126,7 @@ Vertical step bars.
 |---------- |-------- |---------- |-------------  |-------- |
 | title | step title | string | — | — |
 | description | step description | string | — | — |
-| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use <br> custom icons | string | — |
+| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons | string | — |
 
 ### Step Slot
 | Name | Description |

examples/docs/en-US/switch.md

@@ -12,7 +12,7 @@
 
 ## Switch
 
-Switch is used for switching between two opposing states. 
+Switch is used for switching between two opposing states.
 
 ### Basic usage
 
@@ -45,7 +45,7 @@ Switch is used for switching between two opposing states.
 
 ### Disabled
 
-:::demo Adding the `disabled` attribute disables Switch. 
+:::demo Adding the `disabled` attribute disables Switch.
 
 ```html
 <el-switch

examples/docs/en-US/table.md

@@ -104,6 +104,56 @@
           address: 'No. 189, Grove St, Los Angeles',
           zip: 'CA 90036'
         }],
+        tableData4: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }],
         currentRow: null,
         multipleSelection: []
       };
@@ -144,6 +194,10 @@
           return 'positive-row';
         }
         return '';
+      },
+
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
       }
     },
 
@@ -155,7 +209,7 @@
   };
 </script>
 
-## Table 
+## Table
 
 Display multiple data with similar format. You can sort, filter, compare your data in a table.
 
@@ -471,7 +525,7 @@ When there are too many rows, you can use a fixed header.
 ```
 :::
 
-### Table with fixed column 
+### Table with fixed column
 
 When there are too many columns, you can fix some of them.
 
@@ -576,7 +630,7 @@ When there are too many columns, you can fix some of them.
 ```
 :::
 
-### Table with fixed columns and header 
+### Table with fixed columns and header
 
 When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.
 
@@ -683,6 +737,133 @@ When you have huge chunks of data to put in a table, you can fix the header and
 ```
 :::
 
+### Fluid-height Table with fixed header (and columns)
+
+When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.
+
+:::demo  By setting the attribute `max-height` of `el-table`, you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.
+```html
+<template>
+  <el-table
+    :data="tableData4"
+    border
+    style="width: 100%"
+    max-height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Name"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="State"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="City"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Address"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Zip"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      inline-template
+      :context="_self"
+      fixed="right"
+      label="Operations"
+      width="120">
+      <span>
+        <el-button
+          @click.native.prevent="deleteRow($index, tableData4)"
+          type="text"
+          size="small">
+          Remove
+        </el-button>
+      </span>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
+      }
+    },
+    data() {
+      return {
+        tableData4: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Grouping table head
 
 When the data structure is complex, you can use group header to show the data hierarchy.
@@ -875,7 +1056,7 @@ You can also select multiple rows.
     @selection-change="handleSelectionChange">
     <el-table-column
       type="selection"
-      width="50">
+      width="55">
     </el-table-column>
     <el-table-column
       inline-template
@@ -1086,7 +1267,7 @@ Filter the table to find desired data.
 :::
 
 ### Custom column template
- 
+
 Customize table column so it can be integrated with other components.
 :::demo Activate custom column template by adding the `inline-template` attribute. By default, the context of `el-table-column` is the one where `el-table` lies, and you can customize it with the `context` attribute, e.g. `:context="_self"` refers to the current context. This is useful when sometimes Table is encapsulated into another component, and `table-column` is distributed by slots. In `el-column`, you have access to the following data: row, column, $index and store (state management of Table).
 ```html
@@ -1177,7 +1358,8 @@ Customize table column so it can be integrated with other components.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | table data | array | — | — |
-| height | Table's height. By default it has an auto height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
+| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
+| maxHeight | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
 | stripe | whether table is striped | boolean | — | false |
 | border | whether table has vertical border | boolean | — | false |
 | fit | whether width of column automatically fits its container | boolean | — | true |
@@ -1187,6 +1369,7 @@ Customize table column so it can be integrated with other components.
 | row-style | function that returns custom style for a row,  or a string assigning custom style for every row | Function(row, index)/Object | — | — |
 | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
 | context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | - | current context where Table lies |
+| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | | - | No Data |
 
 ### Table Events
 | Event Name | Description | Parameters |
@@ -1198,6 +1381,7 @@ Customize table column so it can be integrated with other components.
 | cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event |
 | cell-click | triggers when clicking a cell | row, column, cell, event |
 | row-click | triggers when clicking a row | row, event |
+| row-contextmenu | triggers when user right clicks on a row | row, event |
 | row-dblclick | triggers when double clicking a row | row, event |
 | header-click | triggers when clicking a column header | column, event |
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |

examples/docs/en-US/tabs.md

@@ -143,4 +143,5 @@ Border card tabs.
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
 | label-content | render function for tab title | Function(h) | - | - |
+| disabled | whether Tab is disabled | boolean | - | false |
 | name      | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |

examples/docs/en-US/tag.md

@@ -34,7 +34,7 @@ Used for marking and selection.
 
 ### Basic usage
 
-::: demo Use the `type` attribute to define Tag's type.
+::: demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
 
 ```html
 <el-tag>Tag One</el-tag>
@@ -93,6 +93,7 @@ Used for marking and selection.
 | closable | whether Tab can be removed | boolean | — | false |
 | close-transition | whether the removal animation is disabled | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
+| color | background color of the tag | string | — | — |
 
 
 ### Events

examples/docs/en-US/time-picker.md

@@ -146,6 +146,7 @@ Can pick an arbitrary time range.
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | - | false |
 | editable | whether the input is editable | boolean | - | true |
+|size | size of Input | string | large/small/mini | — |
 | placeholder | placeholder | string | — | — |
 | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
@@ -163,4 +164,4 @@ Can pick an arbitrary time range.
 ### Time Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | available time range, e.g.<br>`'18:30:00 - 20:30:00'`<br>or<br>`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
+| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |

examples/docs/en-US/tree.md

@@ -243,16 +243,16 @@ Used for node selection. In the following example, data for each layer is acquir
 | Method      | Description    | Parameters     |
 |---------- |-------- |---------- |
 | filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
-| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
+| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
 | setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked |
-| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `true`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
-| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `true`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
+| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
+| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 | setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
 
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| node-click | triggers when a node is clicked | three parameters: <br>node object corresponding to the node clicked, <br>`node` property of TreeNode, <br>TreeNode itself |
-| check-change | triggers when the selected state of the node changes | three parameters: <br>node object corresponding to the node whose selected state is changed, <br>whether the node is selected, <br>whether node's subtree has selected nodes |
+| node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
+| check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes |
 
 

examples/docs/zh-CN/button.md

@@ -189,8 +189,9 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | 尺寸   | string  |   large,small,mini            |    —     |
 | type     | 类型   | string    |   primary,success,warning,danger,info,text |     —    |
-| plain     | 是否朴素按钮   | Boolean    | true,false | false   |
-| disabled  | 禁用    | boolean   | true, false   | false   |
+| plain     | 是否朴素按钮   | Boolean    | — | false   |
+| loading     | 是否加载中状态   | Boolean    | — | false   |
+| disabled  | 是否禁用状态    | boolean   | —   | false   |
 | icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
 | autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |
 | native-type | 原生 type 属性 | string | button,submit,reset | button |

examples/docs/zh-CN/date-picker.md

@@ -289,20 +289,21 @@
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | - | false |
 | editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
 | placeholder | 占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
-| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
+| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
-|picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object |  — | {} |
+|picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象<br>用法参考 demo 或下表 | Object[] | - | - |
+| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | - | - |
 | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | text | 标题文本 | string | — | — |
-| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
+| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |

examples/docs/zh-CN/datetime-picker.md

@@ -233,22 +233,23 @@
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | - | false |
 | editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
 | placeholder | 占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
-| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
+| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
-| picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object |  — | {} |
+| picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象<br>用法参考 demo 或下表 | Object[] | - | - |
+| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | - | - |
 | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | text | 标题文本 | string | — | — |
-| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
+| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
 
 

examples/docs/zh-CN/form.md

@@ -530,7 +530,7 @@
       </el-form-item>
     </el-col>
   </el-form-item>
-  <el-form-item label="即时配送">
+  <el-form-item label="即时配送" prop="delivery">
     <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="活动性质" prop="type">
@@ -756,7 +756,7 @@
     },
     methods: {
       handleSubmit3(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+        this.$refs.dynamicForm.validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {

examples/docs/zh-CN/i18n.md

@@ -38,13 +38,13 @@ Vue.component(Button.name, Button)
 Vue.component(Select.name, Select)
 ```
 
-如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 IgnorePlugin 忽略掉它以减少打包后的文件体积。
+如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。
 
 **webpack.config.js**
 ```javascript
 {
   plugins: [
-    new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/)
+    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
   ]
 }
 ```
@@ -63,6 +63,13 @@ Vue.component(Select.name, Select)
   <li>意大利语（it）</li>
   <li>韩语（ko）</li>
   <li>日语（ja）</li>
+  <li>荷兰语（nl）</li>
+  <li>越南语（vi）</li>
+  <li>俄语（ru-RU）</li>
+  <li>土耳其语（tr-TR）</li>
+  <li>巴西葡萄牙语（pt-br）</li>
+  <li>波斯语（fa）</li>
+  <li>泰语（th）</li>
 </ul>
- 
+
 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。

examples/docs/zh-CN/loading.md

@@ -217,7 +217,7 @@ console.log(loadingInstance1 === loadingInstance2); // true
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；<br>若传入字符串，则会将其作为参数传入 `document.querySelector`<br>以获取到对应 DOM 节点 | object/string | — | document.body |
+| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body |
 | body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false |
 | fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
 | lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |

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

@@ -241,7 +241,9 @@ import { MessageBox } from 'element-ui';
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | MessageBox 标题 | string | — | — |
 | message | MessageBox 消息正文内容 | string | — | — |
-| type | 消息类型，用于显示图标 | string | success/info/<br>warning/error | — |
+| type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
+| customClass | MessageBox 的自定义类名 | string | — | — |
+| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action)，action 的值为'confirm'或'cancel' | — | — |
 | lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
 | showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |
 | showConfirmButton | 是否显示确定按钮 | boolean | — | true |

examples/docs/zh-CN/message.md

@@ -197,6 +197,8 @@ import { Message } from 'element-ui';
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | message | 消息文字 | string | — | — |
 | type | 主题 | string | success/warning/info/error | info |
+| iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
+| customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
 | showClose | 是否显示关闭按钮 | boolean | — | false |
 | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |

examples/docs/zh-CN/notification.md

@@ -224,6 +224,8 @@ import { Notification } from 'element-ui';
 | title | 标题 | string | — | — |
 | message | 说明文字 | string | — | — |
 | type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
+| iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — |
+| customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
 | onClose | 关闭时的回调函数 | function | — | — |
 | offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |

examples/docs/zh-CN/rate.md

@@ -151,12 +151,12 @@
 | max | 最大分值 | number | — | 5 |
 | disabled | 是否为只读 | boolean | — | false |
 | allow-half | 是否允许半选 | boolean | — | false |
-| low-threshold | 低分和中等分数的界限值，值本身<br>被划分在低分中 | number | — | 2 |
-| high-threshold | 高分和中等分数的界限值，值本身<br>被划分在高分中 | number | — | 4 |
-| colors | icon 的颜色数组，共有 3 个元素，<br>为 3 个分段所对应的颜色 | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 |
+| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 |
+| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
 | void-color | 未选中 icon 的颜色 | string | — | #C6D1DE |
 | disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 |
-| icon-classes | icon 的类名数组，共有 3 个元素，<br>为 3 个分段所对应的类名 | array | — | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
+| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |
 | disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |
 | show-text | 是否显示辅助文字 | boolean | — | false |

examples/docs/zh-CN/select.md

@@ -628,6 +628,7 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | multiple | 是否多选 | boolean | — | false |
 | disabled | 是否禁用 | boolean | — | false |
+| size | 输入框尺寸 | string | large/small/mini | — |
 | clearable | 单选时是否可以清空选项 | boolean | — | false |
 | multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
 | name | select input 的 name 属性 | string | — | — |

examples/docs/zh-CN/steps.md

@@ -120,7 +120,7 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | title | 标题 | string | — | — |
 | description | 描述性文字 | string | — | — |
-| icon | 图标 | Element Icon 提供的图标，如果要使用<br>自定义图标可以通过 slot 方式写入 | string | — |
+| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — |
 
 ### Step Slot
 | name | 说明  |

examples/docs/zh-CN/switch.md

@@ -85,8 +85,8 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | width  | switch 的宽度（像素）    | number   | — | 58（有文字）/ 46（无文字） |
-| on-icon-class  | switch 打开时所显示图标的类名，<br>设置此项会忽略 `on-text`    | string   | — | — |
-| off-icon-class  | switch 关闭时所显示图标的类名，<br>设置此项会忽略 `off-text`    | string   | — | — |
+| on-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `on-text`    | string   | — | — |
+| off-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text`    | string   | — | — |
 | on-text  | switch 打开时的文字    | string   | — | ON |
 | off-text  | switch 关闭时的文字    | string   | — | OFF |
 | on-color  | switch 打开时的背景色    | string   | — | #20A0FF |

examples/docs/zh-CN/table.md

@@ -104,6 +104,56 @@
           address: '上海市普陀区金沙江路 1518 弄',
           zip: 200333
         }],
+        tableData4: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }],
         currentRow: null,
         multipleSelection: []
       };
@@ -145,6 +195,10 @@
           return 'positive-row';
         }
         return '';
+      },
+
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
       }
     },
 
@@ -164,7 +218,7 @@
   .el-table .positive-row {
     background: #e2f0e4;
   }
-  
+
   .demo-table .name-wrapper {
     display: inline-block;
   }
@@ -693,6 +747,133 @@
 ```
 :::
 
+### 流体高度
+
+当数据量动态变化时，可以为 Table 设置一个最大高度。
+
+:::demo 通过设置`max-height`属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
+```html
+<template>
+  <el-table
+    :data="tableData4"
+    border
+    style="width: 100%"
+    max-height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="日期"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="province"
+      label="省份"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="市区"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="邮编"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      inline-template
+      :context="_self"
+      fixed="right"
+      label="操作"
+      width="120">
+      <span>
+        <el-button
+          @click.native.prevent="deleteRow($index, tableData4)"
+          type="text"
+          size="small">
+          移除
+        </el-button>
+      </span>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
+      }
+    },
+    data() {
+      return {
+        tableData4: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 多级表头
 
 数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
@@ -884,7 +1065,7 @@
     @selection-change="handleSelectionChange">
     <el-table-column
       type="selection"
-      width="50">
+      width="55">
     </el-table-column>
     <el-table-column
       inline-template
@@ -1196,6 +1377,7 @@
 | row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
 | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — |
 | context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root`。优先读取 column 的 context 属性。 | Object | - | Table 所处上下文 |
+| empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | | - | 暂无数据 |
 
 ### Table Events
 | 事件名 | 说明 | 参数 |
@@ -1207,6 +1389,7 @@
 | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
 | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
 | row-click | 当某一行被点击时会触发该事件 | row, event |
+| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event |
 | row-dblclick | 当某一行被双击时会触发该事件 | row, event |
 | header-click | 当某一列的表头被点击时会触发该事件 | column, event |
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |

examples/docs/zh-CN/tabs.md

@@ -138,4 +138,5 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
 | label-content | 选项卡的标题的渲染 Function | Function(h) | - | - |
+| disabled | 是否禁用 | boolean | - | false |
 | name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |

examples/docs/zh-CN/tag.md

@@ -34,7 +34,7 @@
 
 ### 基础用法
 
-:::demo 由`type`属性来定义，该属性可选填。
+:::demo 由`type`属性来选择tag的类型，也可以通过`color`属性来自定义背景色。
 
 ```html
 <el-tag>标签一</el-tag>
@@ -93,6 +93,7 @@
 | closable | 是否可关闭 | boolean | — | false |
 | close-transition | 是否禁用关闭时的渐变动画 | boolean | — | false |
 | hit | 是否有边框描边 | boolean | — | false |
+| color | 背景色 | string | — | — |
 
 
 ### Events

examples/docs/zh-CN/time-picker.md

@@ -137,7 +137,7 @@
   export default {
     data() {
       return {
-        value1: '14:30',
+        value1: '',
         value2: new Date(2016, 9, 10, 18, 40),
         value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',
@@ -153,11 +153,12 @@
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | - | false |
 | editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
 | placeholder | 占位内容 | string | — | — |
 | format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
-| value | 绑定值 | TimePicker: Date<br>TimeSelect: String | - | - |
+| value | 绑定值 | TimePicker: DateTimeSelect: String | - | - |
 | align | 对齐方式 | string | left, center, right | left |
-| picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object | — | {} |
+| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
 
 ### Time Select Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -170,5 +171,5 @@
 ### Time Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | 可选时间段，例如<br>`'18:30:00 - 20:30:00'`<br>或者传入数组<br>`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
+| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
 

examples/docs/zh-CN/tree.md

@@ -255,14 +255,14 @@
 | 方法名 | 说明 | 参数 |
 |------|--------|------|
 | filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
-| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），<br>则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则<br>仅返回被选中的叶子节点，默认值为 `false` |
+| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点，默认值为 `false` |
 | setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
-| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），<br>则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `true` |
-| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，<br>若为 `true` 则仅设置叶子节点的选中状态，默认值为 `true` |
-| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 <br> 3. boolean 类型，是否设置子节点 ，默认为 false |
+| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `true` |
+| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `true` |
+| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | node-click  | 节点被点击时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
-| check-change  | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、<br>节点本身是否被选中、节点的子树中是否有被选中的节点 |
+| check-change  | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |

examples/pages/template/component.tpl

@@ -26,10 +26,12 @@
             text-align: left;
             border-top: 1px solid #eaeefb;
             background-color: #EFF2F7;
+            white-space: nowrap;
           }
           td, th {
             border-bottom: 1px solid #eaeefb;
             padding: 10px;
+            max-width: 250px;
           }
           th:first-child, td:first-child {
             padding-left: 10px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [
@@ -111,7 +111,8 @@
     "transliteration": "^1.1.11",
     "uppercamelcase": "^1.1.0",
     "url-loader": "^0.5.7",
-    "vue": "^2.0.5",
+    "vue-template-compiler": "2.0.5",
+    "vue": "2.0.5",
     "vue-loader": "^9.9.0",
     "vue-markdown-loader": "^0.5.1",
     "vue-router": "^2.0.0",

packages/autocomplete/src/autocomplete.vue

@@ -19,7 +19,7 @@
         <slot name="append"></slot>
       </template> 
     </el-input>
-    <transition name="md-fade-bottom">
+    <transition name="el-zoom-in-top">
       <ul
         v-if="suggestionVisible"
         class="el-autocomplete__suggestions"

packages/date-picker/src/basic/date-table.vue

@@ -366,8 +366,6 @@
 
         const newDate = new Date(this.year, this.month, 1);
 
-        const clickNormalCell = className.indexOf('prev') === -1 && className.indexOf('next') === -1;
-
         if (className.indexOf('prev') !== -1) {
           if (month === 0) {
             year = year - 1;
@@ -390,7 +388,7 @@
 
         newDate.setDate(parseInt(text, 10));
 
-        if (clickNormalCell && this.selectionMode === 'range') {
+        if (this.selectionMode === 'range') {
           if (this.minDate && this.maxDate) {
             const minDate = new Date(newDate.getTime());
             const maxDate = null;
@@ -419,9 +417,7 @@
             this.rangeState.selecting = true;
             this.markRange(this.minDate);
           }
-        }
-
-        if (selectionMode === 'day') {
+        } else if (selectionMode === 'day') {
           this.$emit('pick', newDate);
         } else if (selectionMode === 'week') {
           var weekNumber = getWeekNumber(newDate);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="el-time-spinner">
+  <div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
     <div
       @mouseenter="emitSelectRange('hours')"
       @mousewheel="handleScroll('hour')"
@@ -136,12 +136,10 @@
       },
 
       handleScroll(type) {
-        window.setTimeout(() => {
-          const ajust = {};
+        const ajust = {};
 
-          ajust[`${type}s`] = Math.min(Math.floor((this.$refs[type].scrollTop - 80) / 32 + 3), 59);
-          this.$emit('change', ajust);
-        }, 0);
+        ajust[`${type}s`] = Math.min(Math.floor((this.$refs[type].scrollTop - 80) / 32 + 3), 59);
+        this.$emit('change', ajust);
       },
 
       ajustScrollTop() {

packages/date-picker/src/basic/year-table.vue

@@ -67,17 +67,17 @@
         date.setFullYear(year);
         style.disabled = typeof this.disabledDate === 'function' &&
           this.disabledDate(date);
-        style.current = this.year === year;
+        style.current = Number(this.year) === year;
 
         return style;
       },
 
       nextTenYear() {
-        this.$emit('pick', this.year + 10, false);
+        this.$emit('pick', Number(this.year) + 10, false);
       },
 
       prevTenYear() {
-        this.$emit('pick', this.year - 10, false);
+        this.$emit('pick', Number(this.year) - 10, false);
       },
 
       handleYearTableClick(event) {

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

@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
       :style="{ width: width + 'px' }"
@@ -21,20 +21,23 @@
           <div class="el-date-range-picker__time-header" v-if="showTime">
             <span class="el-date-range-picker__editors-wrap">
               <span class="el-date-range-picker__time-picker-wrap">
-                <input
+                <el-input
+                  size="small"
+                  ref="minInput"
                   :placeholder="t('el.datepicker.startDate')"
                   class="el-date-range-picker__editor"
                   :value="minVisibleDate"
-                  @input="handleDateInput($event, 'min')"
-                  @change="handleDateChange($event, 'min')"/>
+                  @input.native="handleDateInput($event, 'min')"
+                  @change.native="handleDateChange($event, 'min')" />
               </span>
               <span class="el-date-range-picker__time-picker-wrap">
-                <input
+                <el-input
+                  size="small"
                   :placeholder="t('el.datepicker.startTime')"
                   class="el-date-range-picker__editor"
                   :value="minVisibleTime"
                   @focus="minTimePickerVisible = !minTimePickerVisible"
-                  @change="handleTimeChange($event, 'min')"/>
+                  @change.native="handleTimeChange($event, 'min')" />
                 <time-picker
                   :picker-width="minPickerWidth"
                   ref="minTimePicker"
@@ -47,24 +50,25 @@
             <span class="el-icon-arrow-right"></span>
             <span class="el-date-range-picker__editors-wrap is-right">
               <span class="el-date-range-picker__time-picker-wrap">
-                <input
-                  ref="minInput"
+                <el-input
+                  size="small"
                   :placeholder="t('el.datepicker.endDate')"
                   class="el-date-range-picker__editor"
                   :value="maxVisibleDate"
                   :readonly="!minDate"
-                  @input="handleDateInput($event, 'max')"
-                  @change="handleDateChange($event, 'max')" />
+                  @input.native="handleDateInput($event, 'max')"
+                  @change.native="handleDateChange($event, 'max')" />
               </span>
               <span class="el-date-range-picker__time-picker-wrap">
-                <input
+                <el-input
+                  size="small"
                   ref="maxInput"
                   :placeholder="t('el.datepicker.endTime')"
                   class="el-date-range-picker__editor"
                   :value="maxVisibleTime"
                   @focus="minDate && (maxTimePickerVisible = !maxTimePickerVisible)"
                   :readonly="!minDate"
-                  @change="handleTimeChange($event, 'max')" />
+                  @change.native="handleTimeChange($event, 'max')" />
                 <time-picker
                   :picker-width="maxPickerWidth"
                   ref="maxTimePicker"
@@ -142,6 +146,9 @@
 <script type="text/babel">
   import { nextMonth, prevMonth, toDate, formatDate, parseDate } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
+  import TimePicker from './time';
+  import DateTable from '../basic/date-table';
+  import ElInput from 'element-ui/packages/input';
 
   export default {
     mixins: [Locale],
@@ -234,8 +241,8 @@
       showTime(val) {
         if (!val) return;
         this.$nextTick(_ => {
-          const minInputElm = this.$refs.minInput;
-          const maxInputElm = this.$refs.maxInput;
+          const minInputElm = this.$refs.minInput.$el;
+          const maxInputElm = this.$refs.maxInput.$el;
           if (minInputElm) {
             this.minPickerWidth = minInputElm.getBoundingClientRect().width + 10;
           }
@@ -275,6 +282,8 @@
         } else if (Array.isArray(newVal)) {
           this.minDate = newVal[0] ? toDate(newVal[0]) : null;
           this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
+          if (this.minDate) this.date = new Date(this.minDate);
+          this.handleConfirm(true);
         }
       }
     },
@@ -446,8 +455,8 @@
         this.resetDate();
       },
 
-      handleConfirm() {
-        this.$emit('pick', [this.minDate, this.maxDate]);
+      handleConfirm(visible) {
+        this.$emit('pick', [this.minDate, this.maxDate], visible);
       },
 
       resetDate() {
@@ -455,9 +464,6 @@
       }
     },
 
-    components: {
-      TimePicker: require('./time'),
-      DateTable: require('../basic/date-table')
-    }
+    components: { TimePicker, DateTable, ElInput }
   };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
       :style="{
@@ -22,20 +22,20 @@
         <div class="el-picker-panel__body">
           <div class="el-date-picker__time-header" v-if="showTime">
             <span class="el-date-picker__editor-wrap">
-              <input
-                :placehoder="t('el.datepicker.selectDate')"
-                type="text"
-                v-model.lazy="visibleDate"
-                class="el-date-picker__editor">
+              <el-input
+                :placeholder="t('el.datepicker.selectDate')"
+                :value="visibleDate"
+                size="small"
+                @change.native="visibleDate = $event.target.value" />
             </span>
             <span class="el-date-picker__editor-wrap">
-              <input
+              <el-input
                 ref="input"
                 @focus="timePickerVisible = !timePickerVisible"
-                v-model.lazy="visibleTime"
-                :placehoder="t('el.datepicker.selectTime')"
-                type="text"
-                class="el-date-picker__editor">
+                :placeholder="t('el.datepicker.selectTime')"
+                :value="visibleTime"
+                size="small"
+                @change.native="visibleTime = $event.target.value" />
               <time-picker
                 ref="timepicker"
                 :date="date"
@@ -128,6 +128,11 @@
 <script type="text/babel">
   import { formatDate, parseDate } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
+  import ElInput from 'element-ui/packages/input';
+  import TimePicker from './time';
+  import YearTable from '../basic/year-table';
+  import MonthTable from '../basic/month-table';
+  import DateTable from '../basic/date-table';
 
   export default {
     mixins: [Locale],
@@ -137,7 +142,7 @@
         /* istanbul ignore if */
         if (!val) return;
         this.$nextTick(_ => {
-          const inputElm = this.$refs.input;
+          const inputElm = this.$refs.input.$el;
           if (inputElm) {
             this.pickerWidth = inputElm.getBoundingClientRect().width + 10;
           }
@@ -145,6 +150,7 @@
       },
 
       value(newVal) {
+        if (!newVal) return;
         newVal = new Date(newVal);
         if (!isNaN(newVal)) {
           if (typeof this.disabledDate === 'function' &&
@@ -345,10 +351,7 @@
     },
 
     components: {
-      TimePicker: require('./time'),
-      YearTable: require('../basic/year-table'),
-      MonthTable: require('../basic/month-table'),
-      DateTable: require('../basic/date-table')
+      TimePicker, YearTable, MonthTable, DateTable, ElInput
     },
 
     mounted() {

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

@@ -1,5 +1,8 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition
+    name="el-zoom-in-top"
+    @before-enter="panelCreated"
+    @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
       :style="{ width: width + 'px' }"
@@ -7,7 +10,9 @@
       <div class="el-time-range-picker__content">
         <div class="el-time-range-picker__cell">
           <div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
-          <div class="el-time-range-picker__body el-time-panel__content">
+          <div
+            :class="{ 'has-seconds': showSeconds }"
+            class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="minSpinner"
               :show-seconds="showSeconds"
@@ -21,7 +26,9 @@
         </div>
         <div class="el-time-range-picker__cell">
           <div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div>
-          <div class="el-time-range-picker__body el-time-panel__content">
+          <div
+            :class="{ 'has-seconds': showSeconds }"
+            class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="maxSpinner"
               :show-seconds="showSeconds"
@@ -52,6 +59,7 @@
 <script type="text/babel">
   import { parseDate, limitRange } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
+  import TimeSpinner from '../basic/time-spinner';
 
   const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss');
   const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss');
@@ -75,9 +83,7 @@
   export default {
     mixins: [Locale],
 
-    components: {
-      TimeSpinner: require('../basic/time-spinner')
-    },
+    components: { TimeSpinner },
 
     computed: {
       showSeconds() {
@@ -87,26 +93,6 @@
 
     props: ['value'],
 
-    watch: {
-      value(val) {
-        const time = clacTime(val);
-        if (time.minTime === this.minTime && time.maxTime === this.maxTime) {
-          return;
-        }
-
-        this.handleMinChange({
-          hours: time.minTime.getHours(),
-          minutes: time.minTime.getMinutes(),
-          seconds: time.minTime.getSeconds()
-        });
-        this.handleMaxChange({
-          hours: time.maxTime.getHours(),
-          minutes: time.maxTime.getMinutes(),
-          seconds: time.maxTime.getSeconds()
-        });
-      }
-    },
-
     data() {
       const time = clacTime(this.$options.defaultValue);
 
@@ -126,7 +112,32 @@
       };
     },
 
+    watch: {
+      value(newVal) {
+        this.panelCreated();
+        this.$nextTick(_ => this.ajustScrollTop());
+      }
+    },
+
     methods: {
+      panelCreated() {
+        const time = clacTime(this.value);
+        if (time.minTime === this.minTime && time.maxTime === this.maxTime) {
+          return;
+        }
+
+        this.handleMinChange({
+          hours: time.minTime.getHours(),
+          minutes: time.minTime.getMinutes(),
+          seconds: time.minTime.getSeconds()
+        });
+        this.handleMaxChange({
+          hours: time.maxTime.getHours(),
+          minutes: time.maxTime.getMinutes(),
+          seconds: time.maxTime.getSeconds()
+        });
+      },
+
       handleClear() {
         this.handleCancel();
       },

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

@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
       :style="{ width: width + 'px' }"

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

@@ -1,10 +1,10 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="currentVisible"
       :style="{width: width + 'px'}"
       class="el-time-panel">
-      <div class="el-time-panel__content">
+      <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
         <time-spinner
           ref="spinner"
           @change="handleChange"
@@ -72,6 +72,7 @@
           minutes: date.getMinutes(),
           seconds: date.getSeconds()
         });
+        this.$nextTick(_ => this.ajustScrollTop());
       },
 
       selectableRange(val) {

packages/date-picker/src/picker.vue

@@ -1,35 +1,26 @@
 <template>
-  <span
+  <el-input
     class="el-date-editor"
+    :readonly="!editable || readonly"
+    :disabled="disabled"
+    :size="size"
     v-clickoutside="handleClose"
-    :class="{
-      'is-have-trigger': haveTrigger,
-      'is-active': pickerVisible,
-      'is-filled': !!this.internalValue
-    }">
-
-    <input
-      class="el-date-editor__editor"
-      :class="{ 'is-disabled': disabled }"
-      :readonly="!editable || readonly"
-      :disabled="disabled"
-      type="text"
-      :placeholder="placeholder"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @keydown="handleKeydown"
-      ref="reference"
-      v-model.lazy="visualValue" />
-
-    <span
-      @click.stop="handleClickIcon"
-      class="el-date-editor__trigger el-icon"
+    :placeholder="placeholder"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @keydown.native="handleKeydown"
+    :value="visualValue"
+    @change.native="visualValue = $event.target.value"
+    ref="reference">
+    <i slot="icon"
+      class="el-input__icon"
+      @click="handleClickIcon"
       :class="[showClose ? 'el-icon-close' : triggerClass]"
       @mouseenter="handleMouseEnterIcon"
       @mouseleave="showClose = false"
       v-if="haveTrigger">
-    </span>
-  </span>
+    </i>
+  </el-input>
 </template>
 
 <script>
@@ -38,6 +29,7 @@ import Clickoutside from 'element-ui/src/utils/clickoutside';
 import { formatDate, parseDate, getWeekNumber } from './util';
 import Popper from 'element-ui/src/utils/vue-popper';
 import Emitter from 'element-ui/src/mixins/emitter';
+import ElInput from 'element-ui/packages/input';
 
 const NewPopper = {
   props: {
@@ -77,10 +69,6 @@ const DATE_FORMATTER = function(value, format) {
   return formatDate(value, format);
 };
 const DATE_PARSER = function(text, format) {
-  text = text.split(':');
-  if (text.length > 1) text = text.map(item => item.slice(-2));
-  text = text.join(':');
-
   return parseDate(text, format);
 };
 const RANGE_FORMATTER = function(value, format) {
@@ -97,8 +85,9 @@ const RANGE_FORMATTER = function(value, format) {
 const RANGE_PARSER = function(text, format) {
   const array = text.split(RANGE_SEPARATOR);
   if (array.length === 2) {
-    const range1 = array[0].split(':').map(item => item.slice(-2)).join(':');
-    const range2 = array[1].split(':').map(item => item.slice(-2)).join(':');
+    const range1 = array[0];
+    const range2 = array[1];
+
     return [parseDate(range1, format), parseDate(range2, format)];
   }
   return [];
@@ -193,6 +182,7 @@ export default {
   mixins: [Emitter, NewPopper],
 
   props: {
+    size: String,
     format: String,
     readonly: Boolean,
     placeholder: String,
@@ -210,6 +200,8 @@ export default {
     pickerOptions: {}
   },
 
+  components: { ElInput },
+
   directives: { Clickoutside },
 
   data() {
@@ -229,7 +221,6 @@ export default {
       if (!val && this.picker && typeof this.picker.handleClear === 'function') {
         this.picker.handleClear();
       }
-      this.dispatch('ElFormItem', 'el.form.change');
     },
     value: {
       immediate: true,
@@ -240,10 +231,19 @@ export default {
   },
 
   computed: {
+    reference() {
+      return this.$refs.reference.$el;
+    },
+
+    refInput() {
+      if (this.reference) return this.reference.querySelector('input');
+      return {};
+    },
+
     valueIsEmpty() {
       const val = this.internalValue;
       if (Array.isArray(val)) {
-        for (let i = 0, j = val.length; i < j; i++) {
+        for (let i = 0, len = val.length; i < len; i++) {
           if (val[i]) {
             return false;
           }
@@ -282,6 +282,7 @@ export default {
     visualValue: {
       get() {
         const value = this.internalValue;
+        if (!value) return;
         const formatter = (
           TYPE_VALUE_RESOLVER_MAP[this.type] ||
           TYPE_VALUE_RESOLVER_MAP['default']
@@ -357,42 +358,10 @@ export default {
 
     handleKeydown(event) {
       const keyCode = event.keyCode;
-      const target = event.target;
-      let selectionStart = target.selectionStart;
-      let selectionEnd = target.selectionEnd;
-      let length = target.value.length;
 
       // tab
       if (keyCode === 9) {
         this.pickerVisible = false;
-      // enter
-      } else if (keyCode === 13) {
-        this.pickerVisible = this.picker.visible = false;
-        this.visualValue = target.value;
-        target.blur();
-      // left
-      } else if (keyCode === 37) {
-        event.preventDefault();
-
-        if (selectionEnd === length && selectionStart === length) {
-          target.selectionStart = length - 2;
-        } else if (selectionStart >= 3) {
-          target.selectionStart -= 3;
-        } else {
-          target.selectionStart = 0;
-        }
-        target.selectionEnd = target.selectionStart + 2;
-      // right
-      } else if (keyCode === 39) {
-        event.preventDefault();
-        if (selectionEnd === 0 && selectionStart === 0) {
-          target.selectionEnd = 2;
-        } else if (selectionEnd <= length - 3) {
-          target.selectionEnd += 3;
-        } else {
-          target.selectionEnd = length;
-        }
-        target.selectionStart = target.selectionEnd - 2;
       }
     },
 
@@ -409,7 +378,7 @@ export default {
         this.panel.defaultValue = this.internalValue;
         this.picker = new Vue(this.panel).$mount(document.createElement('div'));
         this.popperElm = this.picker.$el;
-        this.picker.width = this.$refs.reference.getBoundingClientRect().width;
+        this.picker.width = this.reference.getBoundingClientRect().width;
         this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
         this.picker.selectionMode = this.selectionMode;
         if (this.format) {
@@ -453,10 +422,8 @@ export default {
         });
 
         this.picker.$on('select-range', (start, end) => {
-          setTimeout(() => {
-            this.$refs.reference.setSelectionRange(start, end);
-            this.$refs.reference.focus();
-          }, 0);
+          this.refInput.setSelectionRange(start, end);
+          this.refInput.focus();
         });
       } else {
         this.pickerVisible = this.picker.visible = true;
@@ -466,10 +433,10 @@ export default {
 
       if (this.internalValue instanceof Date) {
         this.picker.date = new Date(this.internalValue.getTime());
-        this.picker.resetView && this.picker.resetView();
       } else {
         this.picker.value = this.internalValue;
       }
+      this.picker.resetView && this.picker.resetView();
 
       this.$nextTick(() => {
         this.picker.ajustScrollTop && this.picker.ajustScrollTop();

packages/dropdown/src/dropdown-menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="doDestroy">
+  <transition name="el-zoom-in-top" @after-leave="doDestroy">
     <ul class="el-dropdown-menu" v-show="showPopper">
       <slot></slot>
     </ul>

packages/form/src/form-item.vue

@@ -9,7 +9,7 @@
     </label>
     <div class="el-form-item__content" v-bind:style="contentStyle">
       <slot></slot>
-      <transition name="md-fade-bottom">
+      <transition name="el-zoom-in-top">
         <div class="el-form-item__error" v-if="validateState === 'error'">{{validateMessage}}</div>
       </transition>
     </div>

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

@@ -17,6 +17,12 @@
       :class="{
         'is-active': inputActive
       }">
+        <template slot="prepend" v-if="$slots.prepend">
+          <slot name="prepend"></slot>
+        </template>
+        <template slot="append" v-if="$slots.append">
+          <slot name="append"></slot>
+        </template> 
     </el-input>
     <span
       v-if="controls"
@@ -122,7 +128,7 @@
       currentValue(newVal, oldVal) {
         let value = Number(newVal);
         if (value <= this.max && value >= this.min) {
-          this.$emit('change', value);
+          this.$emit('change', value, oldVal);
           this.$emit('input', value);
         }
       }

packages/input/src/input.vue

@@ -15,7 +15,9 @@
         <slot name="prepend"></slot>
       </div>
       <!-- input 图标 -->
-      <i class="el-input__icon" :class="'el-icon-' + icon" v-if="icon" @click="handleIconClick"></i>
+      <slot name="icon">
+        <i class="el-input__icon" :class="'el-icon-' + icon" v-if="icon" @click="handleIconClick"></i>
+      </slot>
       <input
         v-if="type !== 'textarea'"
         class="el-input__inner"

packages/menu/src/submenu.vue

@@ -16,7 +16,7 @@
         }">
       </i>
     </div>
-    <transition :name="rootMenu.mode === 'horizontal' ? 'md-fade-bottom' : ''">
+    <transition :name="rootMenu.mode === 'horizontal' ? 'el-zoom-in-top' : ''">
       <ul class="el-menu" v-show="opened"><slot></slot></ul>
     </transition>
   </li>

packages/message-box/src/main.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="msgbox-fade">
     <div class="el-message-box__wrapper" v-show="value" @click.self="handleWrapperClick">
-      <div class="el-message-box">
+      <div class="el-message-box" :class="customClass">
         <div class="el-message-box__header" v-if="title !== undefined">
           <div class="el-message-box__title">{{ title || t('el.messagebox.title') }}</div>
           <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
@@ -177,6 +177,7 @@
         title: undefined,
         message: '',
         type: '',
+        customClass: '',
         showInput: false,
         inputValue: null,
         inputPlaceholder: '',

packages/message/src/main.vue

@@ -1,8 +1,14 @@
 <template>
   <transition name="el-message-fade">
-    <div class="el-message" v-show="visible" @mouseenter="clearTimer" @mouseleave="startTimer">
-      <img class="el-message__icon" :src="typeImg" alt="">
-      <div class="el-message__group">
+    <div
+      class="el-message"
+      :class="customClass"
+      v-show="visible"
+      @mouseenter="clearTimer"
+      @mouseleave="startTimer">
+      <img class="el-message__img" :src="typeImg" alt="" v-if="!iconClass">
+      <div class="el-message__group" :class="{ 'is-with-icon': iconClass }">
+        <i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>
         <p>{{ message }}</p>
         <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
       </div>
@@ -18,6 +24,8 @@
         message: '',
         duration: 3000,
         type: 'info',
+        iconClass: '',
+        customClass: '',
         onClose: null,
         showClose: false,
         closed: false,

packages/notification/src/main.vue

@@ -1,8 +1,18 @@
 <template>
   <transition name="el-notification-fade">
-    <div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
-      <i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
-      <div class="el-notification__group" :style="{ 'margin-left': typeClass ? '55px' : '0' }">
+    <div
+      class="el-notification"
+      :class="customClass"
+      v-show="visible"
+      :style="{ top: top ? top + 'px' : 'auto' }"
+      @mouseenter="clearTimer()"
+      @mouseleave="startTimer()">
+      <i
+        class="el-notification__icon"
+        :class="[ typeClass, iconClass ]"
+        v-if="type || iconClass">
+      </i>
+      <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">
         <span>{{ title }}</span>
         <p>{{ message }}</p>
         <div class="el-notification__closeBtn el-icon-close" @click="close"></div>
@@ -27,6 +37,8 @@
         message: '',
         duration: 4500,
         type: '',
+        customClass: '',
+        iconClass: '',
         onClose: null,
         closed: false,
         top: null,

packages/select/src/option-group.vue

@@ -1,6 +1,6 @@
 <template>
   <ul class="el-select-group__wrap">
-    <li class="el-select-group__title">{{ label }}</li>
+    <li class="el-select-group__title" v-show="visible">{{ label }}</li>
     <li>
       <ul class="el-select-group">
         <slot></slot>
@@ -17,6 +17,8 @@
 
     name: 'el-option-group',
 
+    componentName: 'ElOptionGroup',
+
     props: {
       label: String,
       disabled: {
@@ -25,12 +27,30 @@
       }
     },
 
+    data() {
+      return {
+        visible: true
+      };
+    },
+
     watch: {
       disabled(val) {
         this.broadcast('ElOption', 'handleGroupDisabled', val);
       }
     },
 
+    methods: {
+      queryChange() {
+        this.visible = this.$children &&
+          Array.isArray(this.$children) &&
+          this.$children.some(option => option.visible === true);
+      }
+    },
+
+    created() {
+      this.$on('queryChange', this.queryChange);
+    },
+
     mounted() {
       if (this.disabled) {
         this.broadcast('ElOption', 'handleGroupDisabled', this.disabled);

packages/select/src/option.vue

@@ -121,6 +121,7 @@
 
     created() {
       this.parent.options.push(this);
+      this.parent.cachedOptions.push(this);
       this.parent.optionsCount++;
       this.parent.filteredOptionsCount++;
       this.index = this.parent.options.indexOf(this);

packages/select/src/select.vue

@@ -24,6 +24,7 @@
       <input
         type="text"
         class="el-select__input"
+        :class="`is-${ size }`"
         @focus="visible = true"
         @keyup="managePlaceholder"
         @keydown="resetInputState"
@@ -44,6 +45,7 @@
       type="text"
       :placeholder="currentPlaceholder"
       :name="name"
+      :size="size"
       :disabled="disabled"
       :readonly="!filterable || multiple"
       @focus="toggleMenu"
@@ -59,7 +61,7 @@
       @mouseleave.native="inputHovering = false"
       :icon="iconClass">
     </el-input>
-    <transition name="md-fade-bottom" @after-leave="doDestroy">
+    <transition name="el-zoom-in-top" @after-leave="doDestroy">
       <el-select-menu
         ref="popper"
         v-show="visible && emptyText !== false">
@@ -92,6 +94,11 @@
   import { addClass, removeClass, hasClass } from 'wind-dom/src/class';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
   import { t } from 'element-ui/src/locale';
+  const sizeMap = {
+    'large': 42,
+    'small': 30,
+    'mini': 22
+  };
 
   export default {
     mixins: [Emitter, Locale],
@@ -102,38 +109,25 @@
 
     computed: {
       iconClass() {
-        return this.showCloseIcon ? 'circle-close' : (this.remote && this.filterable ? '' : 'caret-top');
+        let criteria = this.clearable &&
+          !this.disabled &&
+          this.inputHovering &&
+          !this.multiple &&
+          this.value !== undefined &&
+          this.value !== '';
+        return criteria ? 'circle-close is-show-close' : (this.remote && this.filterable ? '' : 'caret-top');
       },
 
       debounce() {
         return this.remote ? 300 : 0;
       },
 
-      showCloseIcon() {
-        let criteria = this.clearable &&
-          this.inputHovering &&
-          !this.multiple &&
-          this.value !== undefined &&
-          this.value !== '';
-        if (!this.$el) return false;
-        this.$nextTick(() => {
-          let icon = this.$el.querySelector('.el-input__icon');
-          if (icon) {
-            criteria ? addClass(icon, 'is-show-close') : removeClass(icon, 'is-show-close');
-          }
-        });
-        return criteria;
-      },
-
       emptyText() {
         if (this.loading) {
           return this.t('el.select.loading');
         } else {
-          if (this.voidRemoteQuery) {
-            this.voidRemoteQuery = false;
-            return false;
-          }
-          if (this.filterable && this.filteredOptionsCount === 0) {
+          if (this.remote && this.query === '' && this.options.length === 0) return false;
+          if (this.filterable && this.options.length > 0 && this.filteredOptionsCount === 0) {
             return this.t('el.select.noMatch');
           }
           if (this.options.length === 0) {
@@ -162,6 +156,7 @@
     props: {
       name: String,
       value: {},
+      size: String,
       disabled: Boolean,
       clearable: Boolean,
       filterable: Boolean,
@@ -186,6 +181,7 @@
     data() {
       return {
         options: [],
+        cachedOptions: [],
         selected: this.multiple ? [] : {},
         isSelect: true,
         inputLength: 20,
@@ -198,7 +194,7 @@
         selectedLabel: '',
         hoverIndex: -1,
         query: '',
-        voidRemoteQuery: false,
+        isForcedVisible: false,
         bottomOverflowBeforeHidden: 0,
         topOverflowBeforeHidden: 0,
         optionsAllDisabled: false,
@@ -215,18 +211,18 @@
       value(val) {
         if (this.multiple) {
           this.resetInputHeight();
-          if (val.length > 0) {
+          if (val.length > 0 || (this.$refs.input && this.query !== '')) {
             this.currentPlaceholder = '';
           } else {
             this.currentPlaceholder = this.cachedPlaceHolder;
           }
+          this.dispatch('ElFormItem', 'el.form.change', val);
         }
-        this.selected = this.getSelected();
+        this.setSelected();
         if (this.filterable && !this.multiple) {
           this.inputLength = 20;
         }
         this.$emit('change', val);
-        this.dispatch('ElFormItem', 'el.form.change', val);
       },
 
       query(val) {
@@ -235,16 +231,21 @@
         if (this.multiple && this.filterable) {
           this.resetInputHeight();
         }
+        if (this.isForcedVisible) {
+          this.isForcedVisible = false;
+          return;
+        }
         if (this.remote && typeof this.remoteMethod === 'function') {
           this.hoverIndex = -1;
           this.remoteMethod(val);
-          this.voidRemoteQuery = val === '';
           this.broadcast('ElOption', 'resetIndex');
         } else if (typeof this.filterMethod === 'function') {
           this.filterMethod(val);
+          this.broadcast('ElOptionGroup', 'queryChange');
         } else {
           this.filteredOptionsCount = this.optionsCount;
           this.broadcast('ElOption', 'queryChange', val);
+          this.broadcast('ElOptionGroup', 'queryChange');
         }
       },
 
@@ -259,9 +260,16 @@
           this.query = '';
           this.selectedLabel = '';
           this.resetHoverIndex();
+          this.$nextTick(() => {
+            if (this.$refs.input &&
+              this.$refs.input.value === '' &&
+              this.selected.length === 0) {
+              this.currentPlaceholder = this.cachedPlaceHolder;
+            }
+          });
           if (!this.multiple) {
             this.getOverflows();
-            if (this.selected && this.selected.value) {
+            if (this.selected) {
               this.selectedLabel = this.selected.currentLabel;
             }
           }
@@ -273,6 +281,10 @@
             if (this.multiple) {
               this.$refs.input.focus();
             } else {
+              if (!this.remote) {
+                this.isForcedVisible = true;
+                this.broadcast('ElOption', 'queryChange', '');
+              }
               this.broadcast('ElInput', 'inputSelect');
             }
           }
@@ -291,6 +303,10 @@
         if (this.multiple) {
           this.resetInputHeight();
         }
+        let inputs = this.$el.querySelectorAll('input');
+        if ([].indexOf.call(inputs, document.activeElement) === -1) {
+          this.setSelected();
+        }
       }
     },
 
@@ -330,33 +346,39 @@
         }
       },
 
-      getSelected() {
+      getOption(value) {
+        const option = this.cachedOptions.filter(option => option.value === value)[0];
+        if (option) return option;
+        const label = typeof value === 'string' || typeof value === 'number'
+          ? value : '';
+        let newOption = {
+          value: value,
+          currentLabel: label
+        };
+        if (this.multiple) {
+          newOption.hitState = false;
+        }
+        return newOption;
+      },
+
+      setSelected() {
         if (!this.multiple) {
-          let option = this.options.filter(option => option.value === this.value)[0] ||
-              { value: this.value, currentLabel: this.value };
+          let option = this.getOption(this.value);
           this.selectedLabel = option.currentLabel;
-          return option;
+          this.selected = option;
+          return;
         }
         let result = [];
         if (Array.isArray(this.value)) {
           this.value.forEach(value => {
-            let option = this.options.filter(option => option.value === value)[0];
-            if (option) {
-              result.push(option);
-            } else {
-              result.push({
-                value: this.value,
-                currentLabel: value,
-                hitState: false
-              });
-            }
+            result.push(this.getOption(value));
           });
         }
-        return result;
+        this.selected = result;
       },
 
       handleIconClick(event) {
-        if (this.iconClass === 'circle-close') {
+        if (this.iconClass.indexOf('circle-close') > -1) {
           this.deleteSelected(event);
         } else {
           this.toggleMenu();
@@ -408,13 +430,14 @@
       resetInputState(e) {
         if (e.keyCode !== 8) this.toggleLastOptionHitState(false);
         this.inputLength = this.$refs.input.value.length * 15 + 20;
+        this.resetInputHeight();
       },
 
       resetInputHeight() {
         this.$nextTick(() => {
           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 + 6, this.size === 'small' ? 28 : 36) + 'px';
+          input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 36) + 'px';
           this.broadcast('ElSelectDropdown', 'updatePopper');
         });
       },
@@ -522,7 +545,6 @@
       deleteSelected(event) {
         event.stopPropagation();
         this.$emit('input', '');
-        this.$emit('change', '');
         this.visible = false;
       },
 
@@ -560,12 +582,10 @@
       if (this.multiple && !Array.isArray(this.value)) {
         this.$emit('input', []);
       }
-      if (!this.multiple && (!this.value || Array.isArray(this.value))) {
+      if (!this.multiple && Array.isArray(this.value)) {
         this.$emit('input', '');
       }
-      if (this.remote) {
-        this.voidRemoteQuery = true;
-      }
+      this.setSelected();
 
       this.debouncedOnInputChange = debounce(this.debounce, () => {
         this.onInputChange();
@@ -580,7 +600,6 @@
         this.currentPlaceholder = '';
       }
       addResizeListener(this.$el, this.resetInputWidth);
-      this.selected = this.getSelected();
       if (this.remote && this.multiple) {
         this.resetInputHeight();
       }

packages/slider/src/main.vue

@@ -157,7 +157,7 @@
       },
 
       onSliderClick(event) {
-        if (this.disabled) return;
+        if (this.disabled || this.dragging) return;
         const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
         this.setPosition((event.clientX - sliderOffsetLeft) / this.$sliderWidth * 100);
       },
@@ -189,11 +189,18 @@
 
       onDragEnd() {
         if (this.dragging) {
-          this.dragging = false;
+          /*
+           * 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移
+           * 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
+           */
+          setTimeout(() => {
+            this.dragging = false;
+          }, 0);
           this.$refs.tooltip.showPopper = false;
           this.setPosition(this.newPos);
           window.removeEventListener('mousemove', this.onDragging);
           window.removeEventListener('mouseup', this.onDragEnd);
+          window.removeEventListener('contextmenu', this.onDragEnd);
         }
       },
 
@@ -202,6 +209,7 @@
         this.onDragStart(event);
         window.addEventListener('mousemove', this.onDragging);
         window.addEventListener('mouseup', this.onDragEnd);
+        window.addEventListener('contextmenu', this.onDragEnd);
       }
     },
 

packages/switch/src/component.vue

@@ -126,7 +126,7 @@
         this.coreWidth = this.hasText ? 58 : 46;
       }
       this.handleButtonTransform();
-      if ((this.onColor || this.offColor) && !this.disabled) {
+      if (this.onColor || this.offColor) {
         this.setBackgroundColor();
       }
     }

packages/table/src/filter-panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom">
+  <transition name="el-zoom-in-top">
     <div class="el-table-filter" v-if="multiple" v-show="showPopper">
       <div class="el-table-filter__content">
         <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">

packages/table/src/table-body.js

@@ -1,6 +1,11 @@
 import { getCell, getColumnByCell, getRowIdentity } from './util';
+import ElCheckbox from 'element-ui/packages/checkbox';
 
 export default {
+  components: {
+    ElCheckbox
+  },
+
   props: {
     store: {
       required: true
@@ -38,6 +43,7 @@ export default {
                 key={ this.$parent.rowKey ? this.getKeyOfRow(row, $index) : $index }
                 on-dblclick={ ($event) => this.handleDoubleClick($event, row) }
                 on-click={ ($event) => this.handleClick($event, row) }
+                on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
                 on-mouseenter={ _ => this.handleMouseEnter($index) }
                 on-mouseleave={ _ => this.handleMouseLeave() }
                 class={ this.getRowClass(row, $index) }>
@@ -196,6 +202,11 @@ export default {
       this.store.commit('setHoverRow', null);
     },
 
+    handleContextMenu(event, row) {
+      const table = this.$parent;
+      table.$emit('row-contextmenu', row, event);
+    },
+
     handleDoubleClick(event, row) {
       const table = this.$parent;
       table.$emit('row-dblclick', row, event);

packages/table/src/table-column.js

@@ -13,7 +13,8 @@ const defaults = {
     width: 48,
     minWidth: 48,
     realWidth: 48,
-    order: ''
+    order: '',
+    className: 'el-table-column--selection'
   },
   index: {
     width: 48,

packages/table/src/table-layout.js

@@ -51,26 +51,28 @@ class TableLayout {
     }
   }
 
-  setHeight(height) {
+  setHeight(value, prop = 'height') {
     const el = this.table.$el;
-    if (typeof height === 'string') {
-      if (/^\d+$/.test(height)) {
-        height = Number(height);
-      }
+    if (typeof value === 'string' && /^\d+$/.test(value)) {
+      value = Number(value);
     }
 
-    this.height = height;
+    this.height = value;
 
     if (!el) return;
-    if (!isNaN(height)) {
-      el.style.height = height + 'px';
+    if (typeof value === 'number') {
+      el.style[prop] = value + 'px';
 
       this.updateHeight();
-    } else if (typeof height === 'string') {
+    } else if (typeof value === 'string') {
       this.updateHeight();
     }
   }
 
+  setMaxHeight(value) {
+    return this.setHeight(value, 'max-height');
+  }
+
   updateHeight() {
     const height = this.tableHeight = this.table.$el.clientHeight;
     const { headerWrapper } = this.table.$refs;
@@ -81,7 +83,6 @@ class TableLayout {
         this.bodyHeight = height;
       }
       this.fixedBodyHeight = this.scrollX ? height - this.gutterWidth : height;
-      this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
     } else {
       const headerHeight = this.headerHeight = headerWrapper.offsetHeight;
       const bodyHeight = height - headerHeight;
@@ -89,8 +90,8 @@ class TableLayout {
         this.bodyHeight = bodyHeight;
       }
       this.fixedBodyHeight = this.scrollX ? bodyHeight - this.gutterWidth : bodyHeight;
-      this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
     }
+    this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
   }
 
   update() {

packages/table/src/table.vue

@@ -4,6 +4,7 @@
       'el-table--fit': fit,
       'el-table--striped': stripe,
       'el-table--border': border,
+      'el-table--fluid-height': maxHeight,
       'el-table--enable-row-hover': !store.states.isComplex,
       'el-table--enable-row-transition': true || (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
     }"
@@ -17,8 +18,7 @@
         :style="{ width: layout.bodyWidth ? layout.bodyWidth + 'px' : '' }">
       </table-header>
     </div>
-    <div class="el-table__body-wrapper" ref="bodyWrapper"
-      :style="{ height: layout.bodyHeight ? layout.bodyHeight + 'px' : '' }">
+    <div class="el-table__body-wrapper" ref="bodyWrapper" :style="[bodyHeight]">
       <table-body
         :context="context"
         :store="store"
@@ -29,15 +29,15 @@
         :style="{ width: layout.bodyWidth ? layout.bodyWidth - (layout.scrollY ? layout.gutterWidth : 0 ) + 'px' : '' }">
       </table-body>
       <div class="el-table__empty-block" v-if="!data || data.length === 0">
-        <span class="el-table__empty-text">{{ emptyText }}</span>
+      <span class="el-table__empty-text"><slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot></span>
       </div>
     </div>
     <div class="el-table__fixed" ref="fixedWrapper"
       v-if="fixedColumns.length > 0"
-      :style="{
-        width: layout.fixedWidth ? layout.fixedWidth + 'px' : '',
-        height: layout.viewportHeight ? layout.viewportHeight + 'px' : ''
-      }">
+      :style="[
+        { width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' },
+        fixedHeight
+      ]">
       <div class="el-table__fixed-header-wrapper" ref="fixedHeaderWrapper" v-if="showHeader">
         <table-header
           fixed="left"
@@ -47,10 +47,10 @@
           :style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }"></table-header>
       </div>
       <div class="el-table__fixed-body-wrapper" ref="fixedBodyWrapper"
-        :style="{
-          top: layout.headerHeight + 'px',
-          height: layout.fixedBodyHeight ? layout.fixedBodyHeight + 'px' : ''
-        }">
+        :style="[
+          { top: layout.headerHeight + 'px' },
+          fixedBodyHeight
+        ]">
         <table-body
           fixed="left"
           :store="store"
@@ -64,11 +64,11 @@
     </div>
     <div class="el-table__fixed-right" ref="rightFixedWrapper"
       v-if="rightFixedColumns.length > 0"
-      :style="{
-        width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '',
-        height: layout.viewportHeight ? layout.viewportHeight + 'px' : '',
-        right: layout.scrollY ? layout.gutterWidth + 'px' : ''
-      }">
+      :style="[
+        { width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' },
+        { right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 1)) + 'px' : '' },
+        fixedHeight
+      ]">
       <div class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper" v-if="showHeader">
         <table-header
           fixed="right"
@@ -78,10 +78,10 @@
           :style="{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' }"></table-header>
       </div>
       <div class="el-table__fixed-body-wrapper" ref="rightFixedBodyWrapper"
-        :style="{
-          top: layout.headerHeight + 'px',
-          height: layout.fixedBodyHeight ? layout.fixedBodyHeight + 'px' : ''
-        }">
+        :style="[
+          { top: layout.headerHeight + 'px' },
+          fixedBodyHeight
+        ]">
         <table-body
           fixed="right"
           :store="store"
@@ -93,16 +93,20 @@
         </table-body>
       </div>
     </div>
+    <div class="el-table__fixed-right-patch"
+      v-if="rightFixedColumns.length > 0"
+      :style="{ width: layout.scrollY ? layout.gutterWidth + 'px' : '0', height: layout.headerHeight + 'px' }"></div>
     <div class="el-table__column-resize-proxy" ref="resizeProxy" v-show="resizeProxyVisible"></div>
   </div>
 </template>
 
 <script type="text/babel">
+  import ElCheckbox from 'element-ui/packages/checkbox';
   import Migrating from 'element-ui/src/mixins/migrating';
   import throttle from 'throttle-debounce/throttle';
   import debounce from 'throttle-debounce/debounce';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
-  import { t } from 'element-ui/src/locale';
+  import Locale from 'element-ui/src/mixins/locale';
   import TableStore from './table-store';
   import TableLayout from './table-layout';
   import TableBody from './table-body';
@@ -114,7 +118,7 @@
   export default {
     name: 'el-table',
 
-    mixins: [Migrating],
+    mixins: [Migrating, Locale],
 
     props: {
       data: {
@@ -128,6 +132,8 @@
 
       height: [String, Number],
 
+      maxHeight: [String, Number],
+
       fit: {
         type: Boolean,
         default: true
@@ -152,17 +158,13 @@
 
       highlightCurrentRow: Boolean,
 
-      emptyText: {
-        type: String,
-        default() {
-          return t('el.table.emptyText');
-        }
-      }
+      emptyText: String
     },
 
     components: {
       TableHeader,
-      TableBody
+      TableBody,
+      ElCheckbox
     },
 
     methods: {
@@ -238,6 +240,8 @@
         this.$nextTick(() => {
           if (this.height) {
             this.layout.setHeight(this.height);
+          } else if (this.maxHeight) {
+            this.layout.setMaxHeight(this.maxHeight);
           } else if (this.shouldUpdateHeight) {
             this.layout.updateHeight();
           }
@@ -275,6 +279,60 @@
 
       rightFixedColumns() {
         return this.store.states.rightFixedColumns;
+      },
+
+      bodyHeight() {
+        let style = {};
+
+        if (this.height) {
+          style = {
+            height: this.layout.bodyHeight ? this.layout.bodyHeight + 'px' : ''
+          };
+        } else if (this.maxHeight) {
+          style = {
+            'max-height': (this.showHeader ? this.maxHeight - this.layout.headerHeight : this.maxHeight) + 'px'
+          };
+        }
+
+        return style;
+      },
+
+      fixedBodyHeight() {
+        let style = {};
+
+        if (this.height) {
+          style = {
+            height: this.layout.fixedBodyHeight ? this.layout.fixedBodyHeight + 'px' : ''
+          };
+        } else if (this.maxHeight) {
+          let maxHeight = this.layout.scrollX ? this.maxHeight - this.layout.gutterWidth : this.maxHeight;
+
+          if (this.showHeader) {
+            maxHeight -= this.layout.headerHeight;
+          }
+
+          style = {
+            'max-height': maxHeight + 'px'
+          };
+        }
+
+        return style;
+      },
+
+      fixedHeight() {
+        let style = {};
+
+        if (this.maxHeight) {
+          style = {
+            bottom: (this.layout.scrollX && this.data.length) ? this.layout.gutterWidth + 'px' : ''
+          };
+        } else {
+          style = {
+            height: this.layout.viewportHeight ? this.layout.viewportHeight + 'px' : ''
+          };
+        }
+
+        return style;
       }
     },
 

packages/tabs/src/tab-pane.vue

@@ -6,7 +6,8 @@
       label: String,
       labelContent: Function,
       name: String,
-      closable: Boolean
+      closable: Boolean,
+      disabled: Boolean
     },
 
     data() {

packages/tabs/src/tabs.vue

@@ -39,12 +39,21 @@
           let nextChild = tabs[index];
           let prevChild = tabs[index - 1];
 
-          this.currentName = nextChild ? nextChild.index : prevChild ? prevChild.index : '-1';
+          while (prevChild && prevChild.disabled) {
+            prevChild = tabs[tabs.indexOf(prevChild) - 1];
+          }
+
+          this.currentName = nextChild
+            ? nextChild.index
+            : prevChild
+            ? prevChild.index
+            : '-1';
         }
         this.$emit('tab-remove', tab);
         this.$forceUpdate();
       },
       handleTabClick(tab, event) {
+        if (tab.disabled) return;
         this.currentName = tab.index;
         this.$emit('tab-click', tab, event);
       },
@@ -73,7 +82,7 @@
       }
     },
     mounted() {
-      this.currentName = this.activeName || this.$children[0].index || '1';
+      this.currentName = this.activeName || this.$children[0] && this.$children[0].index || '1';
       this.$nextTick(() => {
         this.$forceUpdate();
       });

packages/tag/src/tag.vue

@@ -1,8 +1,9 @@
 <template>
-  <transition :name="closeTransition ? '' : 'md-fade-center'">
+  <transition :name="closeTransition ? '' : 'el-zoom-in-center'">
     <span
       class="el-tag"
-      :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]">
+      :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]"
+      :style="{backgroundColor: color}">
       <slot></slot>
       <i class="el-tag__close el-icon-close"
         v-if="closable"
@@ -18,7 +19,8 @@
       closable: Boolean,
       type: String,
       hit: Boolean,
-      closeTransition: Boolean
+      closeTransition: Boolean,
+      color: String
     },
     methods: {
       handleClose(event) {

packages/theme-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-theme-default",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "Element component default theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/theme-default/src/col.css

@@ -32,14 +32,14 @@
     .el-col-sm-$i {
       width: calc(1 / 24 * $(i) * 100)%;
     }
-    .el-col-xs-offset-$i {
+    .el-col-sm-offset-$i {
       margin-left: calc(1 / 24 * $(i) * 100)%;
     }
-    .el-col-xs-pull-$i {
+    .el-col-sm-pull-$i {
       position: relative;
       right: calc(1 / 24 * $(i) * 100)%;
     }
-    .el-col-xs-push-$i {
+    .el-col-sm-push-$i {
       position: relative;
       left: calc(1 / 24 * $(i) * 100)%;
     }
@@ -68,14 +68,14 @@
     .el-col-lg-$i {
       width: calc(1 / 24 * $(i) * 100)%;
     }
-    .el-col-xs-offset-$i {
+    .el-col-lg-offset-$i {
       margin-left: calc(1 / 24 * $(i) * 100)%;
     }
-    .el-col-xs-pull-$i {
+    .el-col-lg-pull-$i {
       position: relative;
       right: calc(1 / 24 * $(i) * 100)%;
     }
-    .el-col-xs-push-$i {
+    .el-col-lg-push-$i {
       position: relative;
       left: calc(1 / 24 * $(i) * 100)%;
     }

packages/theme-default/src/common/transition.css

@@ -5,109 +5,53 @@
 .fade-in-linear-leave-active {
   transition: var(--fade-linear-transition);
 }
-
 .fade-in-linear-enter,
 .fade-in-linear-leave,
 .fade-in-linear-leave-active {
   opacity: 0;
 }
 
-.fade-in-enter-active,
-.fade-in-leave-active {
+.el-fade-in-enter-active,
+.el-fade-in-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-
-.fade-in-enter,
-.fade-in-leave-active {
+.el-fade-in-enter,
+.el-fade-in-leave-active {
   opacity: 0;
 }
 
-.md-fade-center-enter-active,
-.md-fade-center-leave-active {
+.el-zoom-in-center-enter-active,
+.el-zoom-in-center-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-.md-fade-center-enter,
-.md-fade-center-leave,
-.md-fade-center-leave-active {
+.el-zoom-in-center-enter,
+.el-zoom-in-center-leave-active {
   opacity: 0;
-  transform: scaleY(0);
+  transform: scaleX(0);
 }
 
-.md-fade-bottom-enter-active,
-.md-fade-bottom-leave-active {
+.el-zoom-in-top-enter-active,
+.el-zoom-in-top-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
   transform-origin: center top;
 }
-.md-fade-bottom-enter,
-.md-fade-bottom-leave,
-.md-fade-bottom-leave-active {
+.el-zoom-in-top-enter,
+.el-zoom-in-top-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-top-enter-active,
-.md-fade-top-leave-active {
+.el-zoom-in-bottom-enter-active,
+.el-zoom-in-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
   transform-origin: center bottom;
 }
-
-.md-fade-top-enter,
-.md-fade-top-leave,
-.md-fade-top-leave-active {
+.el-zoom-in-bottom-enter,
+.el-zoom-in-bottom-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
-
-.md-fade-left-enter-active,
-.md-fade-left-leave-active {
-  opacity: 1;
-  transform: scaleX(1);
-  transition: var(--md-fade-transition);
-  transform-origin: right center;
-}
-.md-fade-left-enter,
-.md-fade-left-leave,
-.md-fade-left-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.md-fade-right-enter-active,
-.md-fade-right-leave-active {
-  opacity: 1;
-  transform: scaleX(1);
-  transition: var(--md-fade-transition);
-  transform-origin: left center;
-}
-.md-fade-right-enter,
-.md-fade-right-leave,
-.md-fade-right-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity .3s cubic-bezier(.645,.045,.355,1);
-}
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-.list-move, .list-enter-active, .list-leave-active {
-  transition: all .5s cubic-bezier(.55,0,.1,1);
-}
-.list-enter, .list-leave-active {
-  opacity: 0;
-  transform: translate(0, -30px);
-}
-/*.list-leave-active {
-  position: absolute;
-  opacity: 0;
-  transform: scaleY(0.01) translate(30px, 0);
-}*/

packages/theme-default/src/common/var.css

@@ -15,13 +15,13 @@
   --color-success: #13ce66;
   --color-warning: #f7ba2a;
   --color-danger: #ff4949;
-  --color-info: #50BFFF;
+  --color-info: #50bfff;
   --color-blue: #2e90fe;
   --color-blue-light: #5da9ff;
   --color-blue-lighter: rgba(var(--color-blue), 0.12);
   --color-white: #fff;
   --color-black: #000;
-  --color-grey: #C0CCDA;
+  --color-grey: #c0ccda;
 
   /* Link
   -------------------------- */
@@ -140,7 +140,7 @@
 
   --select-input-color: var(--color-grey);
   --select-multiple-input-color: #666;
-  --select-input-focus-background: #2ea0ff;
+  --select-input-focus-background: var(--color-primary);
   --select-input-font-size: 12px;
 
   --select-tag-height: 24px;
@@ -164,7 +164,7 @@
   --select-dropdown-max-height: 274px;
   --select-dropdown-padding: 6px 0;
   --select-dropdown-empty-padding: 10px 0;
-  --select-dropdown-border: solid 1px #d3dce6;
+  --select-dropdown-border: solid 1px var(--disabled-border-base);
 
   /* Alert
   -------------------------- */
@@ -256,7 +256,7 @@
   --input-disabled-fill: var(--disabled-fill-base);
   --input-disabled-border: var(--disabled-border-base);
   --input-disabled-color: var(--disabled-color-base);
-  --input-disabled-placeholder-color: #C0CCDA;
+  --input-disabled-placeholder-color: var(--color-grey);
 
   --input-large-font-size: 16px;
   --input-large-height: 42px;
@@ -339,9 +339,9 @@
   --button-ghost-fill: transparent;
   --button-ghost-border: none;
 
-  --button-disabled-color: #C0CCDA;
+  --button-disabled-color: var(--color-grey);
   --button-disabled-fill: #EFF2F7;
-  --button-disabled-border: #D3DCE6;
+  --button-disabled-border: var(--disabled-border-base);
 
   --button-primary-border: var(--color-primary);
   --button-primary-color: var(--color-white);
@@ -374,7 +374,7 @@
   /* Switch
  -------------------------- */
   --switch-on-color: var(--color-primary);
-  --switch-off-color: #C0CCDA;
+  --switch-off-color: var(--color-grey);
   --switch-disabled-color: #E5E9F3;
   --switch-disabled-text-color: #F9FAFC;
 
@@ -413,7 +413,7 @@
   --pagination-button-size: 28px;
   --pagination-button-disabled-color: #e4e4e4;
   --pagination-button-disabled-fill: var(--color-white);
-  --pagination-border-color: #D3DCE6;
+  --pagination-border-color: var(--disabled-border-base);
   --pagination-hover-fill: var(--color-primary);
   --pagination-hover-color: var(--color-white);
 
@@ -421,7 +421,7 @@
  -------------------------- */
   --popover-fill: var(--color-white);
   --popover-font-size: 12px;
-  --popover-border-color: #d3dce6;
+  --popover-border-color: var(--disabled-border-base);
   --popover-arrow-size: 6px;
   --popover-padding: 10px;
   --popover-title-font-size: 13px;
@@ -440,7 +440,6 @@
   -------------------------- */
   --tag-padding: 0 5px;
   --tag-fill: var(--border-color-hover);
-  --tag-border: var(--border-color-hover);
   --tag-color: var(--color-white);
   --tag-close-color: #666;
   --tag-font-size: 12px;
@@ -511,7 +510,7 @@
   --------------------------*/
   --menu-item-color: var(--link-color);
   --menu-item-fill: #eff2f7;
-  --menu-item-hover-fill: #d3dce6;
+  --menu-item-hover-fill: var(--disabled-border-base);
   --submenu-item-fill: #e5e9f2;
 
   --dark-menu-item-color: var(--link-color);
@@ -533,14 +532,13 @@
   --datepicker-off-color: #ddd;
   --datepicker-header-color: var(--border-color-hover);
   --datepicker-icon-color: #99a9bf;
-  --datepicker-trigger-color: #c0ccda;
-  --datepicker-border-color: #d3dce6;
+  --datepicker-border-color: var(--disabled-border-base);
   --datepicker-inner-border-color: #e4e4e4;
   --datepicker-cell-hover-color: #e5e9f2;
   --datepicker-inrange-color: #D3ECFF;
   --datepicker-inrange-hover-color: #AFDCFF;
   --datepicker-active-color: var(--color-primary);
-  --datepicker-text-hover-color: #20a0ff;
+  --datepicker-text-hover-color: var(--color-primary);
 
   /* Loading
   --------------------------*/

packages/theme-default/src/date-picker/date-picker.css

@@ -32,23 +32,6 @@
       padding: 0 5px;
     }
 
-    @e editor {
-      position: relative;
-      border: 1px solid #c0ccda;
-      border-radius: 4px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      height: 28px;
-      outline: none;
-      appearance: none;
-      transition: border 0.3s;
-      width: 100%;
-
-      &:hover {
-        border-color: #20a0ff;
-      }
-    }
-
     @e time-header {
       position: relative;
       border-bottom: 1px solid var(--datepicker-inner-border-color);

packages/theme-default/src/date-picker/date-range-picker.css

@@ -29,23 +29,6 @@
       margin: 0;
     }
 
-    @e editor {
-      position: relative;
-      border: 1px solid #c0ccda;
-      border-radius: 4px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      height: 28px;
-      outline: none;
-      appearance: none;
-      transition: border 0.3s;
-      width: 100%;
-
-      &:hover {
-        border-color: #20a0ff;
-      }
-    }
-
     @e header {
       position: relative;
       text-align: center;
@@ -122,7 +105,7 @@
         top: 13px;
         right: 0;
         z-index: 1;
-        background: #fff;
+        background: var(--color-white);
       }
     }
   }

packages/theme-default/src/date-picker/date-table.css

@@ -49,7 +49,7 @@
       &.start-date,
       &.end-date {
         background-color: var(--datepicker-active-color) !important;
-        color: #fff;
+        color: var(--color-white);
       }
 
       &.disabled {

packages/theme-default/src/date-picker/picker-panel.css

@@ -45,7 +45,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: #e5e9f2;
+        background-color: var(--datepicker-cell-hover-color);
       }
 
       &.active {
@@ -87,7 +87,7 @@
 
     @e link-btn {
       cursor: pointer;
-      color: #55a4ff;
+      color: var(--color-primary);
       text-decoration: none;
       padding: 15px;
       font-size: 12px;

packages/theme-default/src/date-picker/picker.css

@@ -5,115 +5,15 @@
   @b date-editor {
     position: relative;
     display: inline-block;
-    box-sizing: border-box;
-    height: 36px;
-    width: 182px;
-
-    @e editor {
-      border: 1px solid #c0ccda;
-      border-radius: 4px;
-      line-height: 18px;
-      height: 36px;
-      padding: 3px 10px;
-      width: 100%;
-      box-sizing: border-box;
-      transition: border 0.3s;
-      color: #666;
-      font-size: 14px;
-
-      @when disabled {
-        background-color: var(--disabled-fill-base);
-        border-color: var(--disabled-border-base);
-        color: var(--disabled-color-base);
-        cursor: not-allowed;
-
-        &::placeholder {
-          color: var(--input-disabled-placeholder-color);
-        }
-      }
-
-      &::placeholder {
-        color: #bbb;
-        font-size: 14px;
-      }
-    }
-
-    @e trigger {
-      &.el-icon {
-        cursor: pointer;
-        position: absolute;
-        display: inline-block;
-        width: 16px;
-        right: 10px;
-        top: 0;
-        bottom: 0;
-        color: var(--datepicker-trigger-color);
-        font-size: 16px;
-        line-height: 38px;
-      }
-    }
-
-    @e clear {
-      cursor: pointer;
-      position: absolute;
-      width: 20px;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      line-height: 36px;
-      color: var(--datepicker-icon-color);
-
-      &:hover {
-        color: var(--datepicker-text-hover-color);
-      }
-    }
-
-    @when have-trigger {
-      .el-date-editor__editor {
-        padding-right: 20px;
-      }
-
-      .el-date-editor__clear {
-        right: 22px;
-      }
-    }
-
-    &.lg {
-      .el-date-editor__editor {
-        padding: 6px 4px;
-      }
-    }
-
-    &.sm {
-      .el-date-editor__editor {
-        padding: 1px 1px;
-      }
-    }
 
     .el-picker-panel {
       position: absolute;
       min-width: 180px;
       box-sizing: border-box;
       box-shadow: 0 2px 6px #ccc;
-      background: #fff;
+      background: var(--color-white);
       z-index: 10;
       top: 41px;
     }
   }
-
-  .el-date-editor__editor:focus,
-  .el-date-editor:hover > .el-date-editor__editor,
-  .el-date-editor.is-active > .el-date-editor__editor {
-    outline: none;
-    border-color: var(--datepicker-active-color);
-  }
-
-  .el-date-editor .el-date-editor__clear {
-    display: none;
-  }
-
-  .el-date-editor.is-filled:hover .el-date-editor__clear,
-  .el-date-editor.is-filled.is-active > .el-date-editor__clear {
-    display: inline-block;
-  }
 }

packages/theme-default/src/date-picker/time-picker.css

@@ -3,31 +3,30 @@
 @component-namespace el {
   @b time-panel {
     margin: 5px 0;
-    border: solid 1px #d3dce6;
-    background-color: #fff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+    border: solid 1px var(--datepicker-border-color);
+    background-color: var(--color-white);
+    box-shadow: var(--box-shadow-base);
     border-radius: 2px;
     position: absolute;
     width: 180px;
     left: 0;
-    z-index: 1000;
+    z-index: var(--index-top);
     user-select: none;
 
     @e content {
       font-size: 0;
-      display: flex;
       position: relative;
       overflow: hidden;
 
       &::after, &::before {
         content: ":";
         top: 50%;
-        color: #fff;
+        color: var(--color-white);
         position: absolute;
         font-size: 14px;
         margin-top: -15px;
         line-height: 16px;
-        background-color: #20a0ff;
+        background-color: var(--datepicker-active-color);
         height: 32px;
         z-index: -1;
         left: 0;
@@ -38,14 +37,24 @@
       }
 
       &::after {
-        left: calc(100%/3*2);
+        left: 50%;
         margin-left: -2px;
       }
 
       &::before {
-        padding-left: calc(100%/3);
+        padding-left: 50%;
         margin-right: -2px;
       }
+
+      &.has-seconds {
+        &::after {
+          left: calc(100% / 3 * 2);
+        }
+
+        &::before {
+          padding-left: calc(100% / 3);
+        }
+      }
     }
 
     @e footer {
@@ -70,7 +79,7 @@
 
       &.confirm {
         font-weight: 800;
-        color: #20a0ff;
+        color: var(--datepicker-active-color);
       }
     }
 

packages/theme-default/src/date-picker/time-range-picker.css

@@ -9,14 +9,14 @@
       position: relative;
       text-align: center;
       padding: 10px;
-      display: flex;
     }
 
     @e cell {
       box-sizing: border-box;
       margin: 0;
       padding: 4px 7px 7px;
-      flex: 1;
+      width: 50%;
+      display: inline-block;
     }
 
     @e header {
@@ -26,7 +26,6 @@
     }
 
     @e body {
-      display: flex;
       border-radius:2px;
       border: 1px solid var(--datepicker-border-color);
     }

packages/theme-default/src/date-picker/time-spinner.css

@@ -2,10 +2,17 @@
 
 @component-namespace el {
   @b time-spinner {
+    &.has-seconds {
+      .el-time-spinner__wrapper {
+        width: calc(100% / 3);
+      }
+    }
+
     @e wrapper {
       height: 190px;
       overflow: hidden;
-      flex: 1;
+      display: inline-block;
+      width: 50%;
       vertical-align: top;
       position: relative;
       -ms-overflow-style: none;
@@ -36,12 +43,12 @@
       font-size: 12px;
 
       &:hover:not(.disabled):not(.active) {
-        background: #E5E9F2;
+        background: var(--datepicker-cell-hover-color);
         cursor: pointer;
       }
 
       &.active:not(.disabled) {
-        color: #fff;
+        color: var(--color-white);
       }
 
       &.disabled {

packages/theme-default/src/input.css

@@ -5,22 +5,23 @@
   @b input {
     position: relative;
     font-size: var(--font-size-base);
-    
+
     @e inner {
-      display: block;
-      padding: 3px 10px;
-      box-sizing: border-box;
-      width: 100%;
-      height: var(--input-height);
-      color: var(--input-color);
-      background-color: #fff;
+      appearance: none;
+      background-color: var(--color-white);
       background-image: none;
-      border: var(--input-border);
       border-radius: 4px;
-      transition: var(--border-transition-base);
-      outline: none;
+      border: var(--input-border);
+      box-sizing: border-box;
+      color: var(--input-color);
+      display: block;
       font-size: inherit;
+      height: var(--input-height);
       line-height: normal;
+      outline: none;
+      padding: 3px 10px;
+      transition: var(--border-transition-base);
+      width: 100%;
 
       &::placeholder {
         color: var(--input-placeholder-color);
@@ -29,6 +30,7 @@
       &:hover {
         border-color: var(--input-hover-border);
       }
+
       &:focus {
         outline: none;
         border-color: var(--input-focus-border);

packages/theme-default/src/message.css

@@ -20,6 +20,11 @@
     @e group {
       margin-left: 38px;
       position: relative;
+      height: 20px;
+
+      @when with-icon {
+        margin-left: 0;
+      }
 
       & p {
         font-size: var(--font-size-base);
@@ -28,16 +33,23 @@
         white-space: nowrap;
         color: var(--message-content-color);
         text-align: justify;
+        display: inline-block;
+        vertical-align: middle;
       }
     }
 
-    @e icon {
+    @e img {
       size: 40px;
       position: absolute;
       left: 0;
       top: 0;
     }
 
+    @e icon {
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+
     @e closeBtn {
       position: absolute 3px 0 * *;
       cursor: pointer;

packages/theme-default/src/notification.css

@@ -16,6 +16,10 @@
     overflow: hidden;
 
     @e group {
+      margin-left: 0;
+      @when with-icon {
+        margin-left: 55px;
+      }
       & span {
         font-size: var(--notification-title-font-size);
         color: var(--notification-title-color);

packages/theme-default/src/select.css

@@ -71,13 +71,16 @@
       border: none;
       outline: none;
       padding: 0;
-      margin: 4px 0 -3px 10px;
+      margin-left: 10px;
       color: var(--select-multiple-input-color);
       font-size: var(--select-font-size);
       vertical-align: baseline;
       appearance: none;
       height: 28px;
       background-color: transparent;
+      @when mini {
+        height: 14px;
+      }
     }
 
     @e close {
@@ -100,6 +103,8 @@
       line-height: normal;
       white-space: normal;
       z-index: var(--index-top);
+      top: 50%;
+      transform: translateY(-50%);
     }
 
     & .el-tag__close {
@@ -110,7 +115,7 @@
       height: var(--select-tag-height);
       line-height: var(--select-tag-height);
       box-sizing: border-box;
-      margin: 6px 0 0 6px;
+      margin: 3px 0 3px 6px;
     }
 
     @e tag {

packages/theme-default/src/slider.css

@@ -20,7 +20,7 @@
         margin-right: 160px;
         width: auto;
       }
-      
+
       &.disabled {
         cursor: default;
 
@@ -79,6 +79,7 @@
       transform: translateX(-50%);
       background-color: transparent;
       text-align: center;
+      user-select: none;
 
       .el-tooltip {
         line-height: 1;
@@ -113,6 +114,7 @@
       background-color: var(--slider-main-background-color);
       border-radius: 50%;
       transition: .2s;
+      user-select: none;
 
       &:hover,
       &.hover,

packages/theme-default/src/spinner.css

@@ -3,8 +3,8 @@
 
 @component-namespace el {
   @b time-spinner {
-    display: flex;
     width: 100%;
+    white-space: nowrap;
   }
 
   @b spinner {

packages/theme-default/src/step.css

@@ -36,20 +36,21 @@
       @when horizontal {
         top: 15px;
         height: 2px;
-        left: 30px;
+        left: 32px;
         right: 0;
       }
 
       @when vertical {
         width: 2px;
         box-sizing: border-box;
-        top: 30px;
+        top: 32px;
         bottom: 0;
+        left: 15px;
       }
     }
 
     @e line-inner {
-      display: inherit;
+      display: block;
       border-width: 1px;
       border-style: solid;
       border-color: inherit;

packages/theme-default/src/switch.css

@@ -80,15 +80,15 @@
 
     @when disabled {
       .el-switch__core {
-        border-color: var(--switch-disabled-color);
-        background: var(--switch-disabled-color);
+        border-color: var(--switch-disabled-color) !important;
+        background: var(--switch-disabled-color) !important;
 
         & span {
-          background-color: var(--switch-disabled-text-color);
+          background-color: var(--switch-disabled-text-color) !important;
         }
 
         & ~ .el-switch__label * {
-          color: var(--switch-disabled-text-color);
+          color: var(--switch-disabled-text-color) !important;
         }
       }
 

packages/theme-default/src/table-column.css

@@ -4,6 +4,13 @@
 @import "./common/var.css";
 
 @component-namespace el {
+  @b table-column {
+    @m selection .cell {
+      padding-left: 14px;
+      padding-right: 14px;
+    }
+  }
+
   @b table-filter {
     border: solid 1px #d3dce6;
     border-radius: 2px;

packages/theme-default/src/table.css

@@ -154,6 +154,14 @@
       }
     }
 
+    @e fixed-right-patch {
+      position: absolute;
+      top: -1px;
+      right: 0;
+      background-color: var(--table-header-background);
+      border-bottom: 1px solid var(--table-border-color);
+    }
+
     @e fixed-right {
       top: 0;
       left: auto;
@@ -380,5 +388,13 @@
         background-color: #eff2f7;
       }
     }
+
+    @modifier fluid-height {
+      .el-table__fixed,
+      .el-table__fixed-right {
+        bottom: 0;
+        overflow: hidden;
+      }
+    }
   }
 }

packages/theme-default/src/tabs.css

@@ -59,6 +59,11 @@
         color: #1f2d3d;
         cursor: pointer;
       }
+
+      @when disabled {
+        color: var(--disabled-color-base);
+        cursor: default;
+      }
     }
     @e content {
       overflow: hidden;

packages/theme-default/src/tag.css

@@ -7,12 +7,13 @@
     background-color: var(--tag-fill);
     display: inline-block;
     padding: var(--tag-padding);
-    height: 22px;
-    line-height: @height;
+    height: 24px;
+    line-height: calc(@height - 2);
     font-size: var(--tag-font-size);
     color: var(--tag-color);
     border-radius: var(--tag-border-radius);
-    border: 1px solid var(--tag-border);
+    box-sizing: border-box;
+    border: 1px solid transparent;
 
     & .el-icon-close {
       border-radius: 50%;

packages/theme-default/src/time-select.css

@@ -27,7 +27,7 @@
   color: #fff;
 
   &:hover {
-    background-color: #1d8ce0;
+    background-color: var(--color-primary);
   }
 }
 

packages/theme-default/src/upload.css

@@ -37,15 +37,17 @@
       box-sizing: border-box;
       border-radius: 4px;
       width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       position: relative;
 
       a {
         color: #475669;
-        transition: color .3s;
+        display: block;
+        margin-right: 40px;
+        overflow: hidden;
         padding-left: 4px;
+        text-overflow: ellipsis;
+        transition: color .3s;
+        white-space: nowrap;
 
         [class^="el-icon"] {
           color: #99a9bf;
@@ -81,7 +83,7 @@
           .el-upload__btn-delete {
             display: block;
             cursor: pointer;
-          }   
+          }
         }
       }
     }