[release] 1.0.8

[build] 1.0.8
update changelog
2025-12-16 11:44:01 +08:00 · 2016-12-20 19:01:14 +08:00 · 2016-12-20 19:01:14 +08:00 · 2016-12-20 18:56:49 +08:00 · 2016-12-20 18:54:50 +08:00 · 2016-12-20 18:54:50 +08:00
201 changed files with 10604 additions and 486 deletions
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -58,7 +58,7 @@ npm run dist
 ```

 ## 组件开发规范
- 通过 `npm run new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档
+- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档
 - 如果包含父子组件，需要更改目录结构，参考 `Button`
 - 组件内如果依赖了其他组件，需要在当前组件内引入，参考 `Select`

--- a/.gitignore
+++ b/.gitignore
@@ -12,4 +12,3 @@ examples/pages/zh-CN
 fe.element/element-ui
 .npmrc
 coverage
-yarn.lock
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,23 +1,18 @@
+sudo: false
 language: node_js
-node_js: 5
+node_js: stable
 cache:
-  bundler: true
  directories:
-  - node_modules
-  - travis_phantomjs
+  - $HOME/.npm
+  - $HOME/.yarn-cache
 before_install:
+- curl -o- -L https://yarnpkg.com/install.sh | bash
+- export PATH=$HOME/.yarn/bin:$PATH
 - export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)"
 - export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)"
 - export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)"
- export PHANTOMJS_VERSION=2.1.1
- export PATH=$PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64/bin:$PATH
- if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then rm -rf $PWD/travis_phantomjs;
-  mkdir -p $PWD/travis_phantomjs; fi
- if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then wget https://github.com/Medium/phantomjs/releases/download/v$PHANTOMJS_VERSION/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2
-  -O $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2; fi
- if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then tar -xvf $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2
-  -C $PWD/travis_phantomjs; fi
- phantomjs --version
+install: yarn install
+script: yarn run test
 after_success:
 - sh build/deploy-ci.sh
 - cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,38 @@
 ## Changelog

+### 1.0.8
+
+*2016-12-20*
+
+- Fixed nested Popup from event bubbling, #1677
+- Fixed the issue that datetimerange-typed DatePicker can not select time, #1758
+- Fixed `change` event not firing correctly of Slider, #1809
+- Fixed Loading's spinner splitting while animating in some conditions, #1786
+- Added `loading-text`, `no-data-text`, `no-match-text` properties and `visible-change` event for Select, #1849
+- Added `popper-class` property for DatePicker, Select and Tooltip, #1806
+- Added `expand-on-click-node`, `current-node-key` properties and `current-change` event for Tree, #1805 #1807
+- Added the third parameter `column` for Table's `row-click` event, #1808
+- Fixed an error when pages with Checkbox switching routes due to `computed` property being cached, #1860
+- Added the tab instance as a parameter for TabPanel's `label-content` render function, #1857
+- Added infinite submenus support for NavMenu in vertical mode, #1851
+- Updated Checkbox so that it works without a binding value, #1818
+- Added `onProgress` hook for Progress, #1782
+- Fixed Tab not updating active bar with dynamic label, #1761
+- Added `filter-change` event for Table, and `column-key` property for TableColumn, #1876
+- Added `hide-on-click` property for Dropdown, #1879
+
+### 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*
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,36 @@
 ## 更新日志

+### 1.0.8
+*2016-12-20*
+
+- 修复 Popup 在叠加使用时阻止事件冒泡，#1677
+- 修复 DatePicker 类型为 datetimerange 时无法选择时间的问题，#1758
+- 修复 Slider 的 `change` 事件不能正确触发的问题，#1809
+- 修复 Loading 的 spinner 在某些情况下转动时出现碎片的问题，#1786
+- 新增 Select 的 `loading-text`、`no-data-text`、`no-match-text` 属性和 `visible-change` 事件，#1849
+- 新增 DatePicker、Select 和 Tooltip 的 `popper-class` 属性，#1806
+- 新增 Tree 的 `expand-on-click-node`、`current-node-key` 属性和 `current-change` 事件，#1805 #1807
+- 新增 Table `row-click` 事件的第三个参数 `column`，#1808
+- 修复 Checkbox 的在路由切换时因为 computed 属性被缓存导致的bug，#1860
+- 新增 TabPanel `label-content` 渲染钩子方法中增加 tab 实例的参数，#1857
+- 新增 NavMenu 组件增加无限级子菜单（vertical模式）的支持，#1851
+- 新增 Checkbox 现在支持不绑定 value 也可以正常使用，#1818
+- 新增 Progress 的 `onProgress` 钩子函数，#1782
+- 修复 Tab 组件 active bar 在动态 label 下没有更新的问题，#1761
+- 新增 Table 的 `filter-change` 事件和 TableColumn 的 `column-key` 属性，#1876
+- 新增 Dropdown `hide-on-click` 属性，#1879
+
+### 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*

--- a/README.md
+++ b/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)
@@ -7,6 +10,8 @@
 ![JS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS)
 ![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-default/index.css?compression=gzip&label=gzip%20size:%20CSS)
 [![Join the chat at https://gitter.im/ElemeFE/element](https://badges.gitter.im/ElemeFE/element.svg)](https://gitter.im/ElemeFE/element?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![OpenCollective](https://opencollective.com/element/backers/badge.svg)](#backers) 
+[![OpenCollective](https://opencollective.com/element/sponsors/badge.svg)](#sponsors)

 > A Vue.js 2.0 UI Toolkit for Web.

@@ -80,5 +85,82 @@ English documentation is brought to you by SwiftGG Translation Team. Our special
 - [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="">
+
+## Backers
+
+Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/element#backer)]
+
+<a href="https://opencollective.com/element/backer/0/website" target="_blank"><img src="https://opencollective.com/element/backer/0/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/1/website" target="_blank"><img src="https://opencollective.com/element/backer/1/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/2/website" target="_blank"><img src="https://opencollective.com/element/backer/2/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/3/website" target="_blank"><img src="https://opencollective.com/element/backer/3/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/4/website" target="_blank"><img src="https://opencollective.com/element/backer/4/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/5/website" target="_blank"><img src="https://opencollective.com/element/backer/5/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/6/website" target="_blank"><img src="https://opencollective.com/element/backer/6/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/7/website" target="_blank"><img src="https://opencollective.com/element/backer/7/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/8/website" target="_blank"><img src="https://opencollective.com/element/backer/8/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/9/website" target="_blank"><img src="https://opencollective.com/element/backer/9/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/10/website" target="_blank"><img src="https://opencollective.com/element/backer/10/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/11/website" target="_blank"><img src="https://opencollective.com/element/backer/11/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/12/website" target="_blank"><img src="https://opencollective.com/element/backer/12/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/13/website" target="_blank"><img src="https://opencollective.com/element/backer/13/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/14/website" target="_blank"><img src="https://opencollective.com/element/backer/14/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/15/website" target="_blank"><img src="https://opencollective.com/element/backer/15/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/16/website" target="_blank"><img src="https://opencollective.com/element/backer/16/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/17/website" target="_blank"><img src="https://opencollective.com/element/backer/17/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/18/website" target="_blank"><img src="https://opencollective.com/element/backer/18/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/19/website" target="_blank"><img src="https://opencollective.com/element/backer/19/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/20/website" target="_blank"><img src="https://opencollective.com/element/backer/20/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/21/website" target="_blank"><img src="https://opencollective.com/element/backer/21/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/22/website" target="_blank"><img src="https://opencollective.com/element/backer/22/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/23/website" target="_blank"><img src="https://opencollective.com/element/backer/23/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/24/website" target="_blank"><img src="https://opencollective.com/element/backer/24/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/25/website" target="_blank"><img src="https://opencollective.com/element/backer/25/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/26/website" target="_blank"><img src="https://opencollective.com/element/backer/26/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/27/website" target="_blank"><img src="https://opencollective.com/element/backer/27/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/28/website" target="_blank"><img src="https://opencollective.com/element/backer/28/avatar.svg"></a>
+<a href="https://opencollective.com/element/backer/29/website" target="_blank"><img src="https://opencollective.com/element/backer/29/avatar.svg"></a>
+
+
+## Sponsors
+
+Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/element#sponsor)]
+
+<a href="https://opencollective.com/element/sponsor/0/website" target="_blank"><img src="https://opencollective.com/element/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/1/website" target="_blank"><img src="https://opencollective.com/element/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/2/website" target="_blank"><img src="https://opencollective.com/element/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/3/website" target="_blank"><img src="https://opencollective.com/element/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/4/website" target="_blank"><img src="https://opencollective.com/element/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/5/website" target="_blank"><img src="https://opencollective.com/element/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/6/website" target="_blank"><img src="https://opencollective.com/element/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/7/website" target="_blank"><img src="https://opencollective.com/element/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/8/website" target="_blank"><img src="https://opencollective.com/element/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/9/website" target="_blank"><img src="https://opencollective.com/element/sponsor/9/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/10/website" target="_blank"><img src="https://opencollective.com/element/sponsor/10/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/11/website" target="_blank"><img src="https://opencollective.com/element/sponsor/11/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/12/website" target="_blank"><img src="https://opencollective.com/element/sponsor/12/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/13/website" target="_blank"><img src="https://opencollective.com/element/sponsor/13/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/14/website" target="_blank"><img src="https://opencollective.com/element/sponsor/14/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/15/website" target="_blank"><img src="https://opencollective.com/element/sponsor/15/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/16/website" target="_blank"><img src="https://opencollective.com/element/sponsor/16/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/17/website" target="_blank"><img src="https://opencollective.com/element/sponsor/17/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/18/website" target="_blank"><img src="https://opencollective.com/element/sponsor/18/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/19/website" target="_blank"><img src="https://opencollective.com/element/sponsor/19/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/20/website" target="_blank"><img src="https://opencollective.com/element/sponsor/20/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/21/website" target="_blank"><img src="https://opencollective.com/element/sponsor/21/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/22/website" target="_blank"><img src="https://opencollective.com/element/sponsor/22/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/23/website" target="_blank"><img src="https://opencollective.com/element/sponsor/23/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/24/website" target="_blank"><img src="https://opencollective.com/element/sponsor/24/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/25/website" target="_blank"><img src="https://opencollective.com/element/sponsor/25/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/26/website" target="_blank"><img src="https://opencollective.com/element/sponsor/26/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/27/website" target="_blank"><img src="https://opencollective.com/element/sponsor/27/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/28/website" target="_blank"><img src="https://opencollective.com/element/sponsor/28/avatar.svg"></a>
+<a href="https://opencollective.com/element/sponsor/29/website" target="_blank"><img src="https://opencollective.com/element/sponsor/29/avatar.svg"></a>
+
+
+
 ## LICENSE
 MIT
--- a/element_logo.svg
+++ b/element_logo.svg
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -160,13 +160,13 @@

      goAnchor() {
        if (location.href.match(/#/g).length > 1) {
-          const auchor = location.href.match(/#[^#]+$/g);
-          if (!auchor || auchor.length !== 1) return;
-          const elm = document.querySelector(auchor[0]);
+          const anchor = location.href.match(/#[^#]+$/g);
+          if (!anchor) return;
+          const elm = document.querySelector(anchor[0]);
          if (!elm) return;

          setTimeout(_ => {
-            document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop;
+            document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop + 120;
          }, 50);
        }
      }
--- a/examples/assets/styles/fonts/style.css
+++ b/examples/assets/styles/fonts/style.css
@@ -1,10 +1,10 @@
@font-face {
  font-family: 'icomoon';
-  src:  url('assets/styles/fonts/icomoon.eot?h6xgdm');
-  src:  url('assets/styles/fonts/icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
-    url('assets/styles/fonts/icomoon.ttf?h6xgdm') format('truetype'),
-    url('assets/styles/fonts/icomoon.woff?h6xgdm') format('woff'),
-    url('assets/styles/fonts/icomoon.svg?h6xgdm#icomoon') format('svg');
+  src:  url('icomoon.eot?h6xgdm');
+  src:  url('icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
+    url('icomoon.ttf?h6xgdm') format('truetype'),
+    url('icomoon.woff?h6xgdm') format('woff'),
+    url('icomoon.svg?h6xgdm#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
 }
--- a/examples/docs/en-US/button.md
+++ b/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 |
--- a/examples/docs/en-US/custom-theme.md
+++ b/examples/docs/en-US/custom-theme.md
@@ -20,7 +20,7 @@ npm i https://github.com/ElementUI/theme-default -D
 After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will.

 ```shell
-et -i [custom output directory]
+et -i [custom output file]

 > ✔ Generator variables file
 ```
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -257,9 +257,10 @@ Picking a date range is supported.
 |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 |
+| popper-class | custom class name for DatePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |

 ### Picker Options
@@ -272,4 +273,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 | — | — |
--- a/examples/docs/en-US/datetime-picker.md
+++ b/examples/docs/en-US/datetime-picker.md
@@ -212,9 +212,10 @@ Select date and time in one picker.
 | 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 |
+| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |

 ### Picker Options
@@ -227,4 +228,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 | — | — |
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -113,6 +113,7 @@ Click the triggering element or hover on it.
 | size          | component size, refer to `Button` component     | string          | large, small, mini  |  —  |
 | menu-align    | horizontal alignment     | string          | start/end  | end |
 | trigger       | how to trigger     | string  |    hover/click  |  hover |
+| hide-on-click | whether to hide menu after clicking menu-item     | boolean          | -  | true |

 ### Dropdown Events
 | Event Name | Description | Parameters |
--- a/examples/docs/en-US/i18n.md
+++ b/examples/docs/en-US/i18n.md
@@ -58,6 +58,7 @@ Currently Element ships with the following languages:
  <li>Brazilian Portuguese (pt-br)</li>
  <li>Farsi (fa)</li>
  <li>Thai (th)</li>
+  <li>Indonesian (id)</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.
--- a/examples/docs/en-US/installation.md
+++ b/examples/docs/en-US/installation.md
@@ -4,7 +4,7 @@
 Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).

 ```shell
-npm i element-ui -D
+npm i element-ui -S
 ```

 ### CDN
--- a/examples/docs/en-US/menu.md
+++ b/examples/docs/en-US/menu.md
@@ -77,6 +77,10 @@ Vertical NavMenu with sub-menus.
        <el-menu-item-group title="Group Two">
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item four</template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-submenu>
      </el-submenu>
      <el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
      <el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
@@ -94,6 +98,10 @@ Vertical NavMenu with sub-menus.
        <el-menu-item-group title="Group Two">
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item four</template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">Navigator Two</el-menu-item>
      <el-menu-item index="3">Navigator Three</el-menu-item>
@@ -109,16 +117,6 @@ Vertical NavMenu with sub-menus.
      <el-menu-item-group title="Group Two">
        <el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
        <el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
-          <!-- <el-submenu index="5">
-            <template slot="title">Navigator Five</template>
-            <el-menu-item-group title="Group One">
-              <el-menu-item index="5-1">item one</el-menu-item>
-              <el-menu-item index="5-2">item two</el-menu-item>
-            </el-menu-item-group>
-            <el-menu-item-group title="Group Two">
-              <el-menu-item index="5-3">item three</el-menu-item>
-            </el-menu-item-group>
-          </el-submenu> -->
      </el-menu-item-group>
    </el-menu>
  </el-col>
--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -244,7 +244,8 @@ 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) |
--- a/examples/docs/en-US/message.md
+++ b/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 | — | — |
--- a/examples/docs/en-US/notification.md
+++ b/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 |
--- a/examples/docs/en-US/pagination.md
+++ b/examples/docs/en-US/pagination.md
@@ -156,7 +156,7 @@ Add more modules based on your scenario.
 | total | total item count | number | — | — |
 | page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
 | current-page | current page number | number | — | 1 |
-| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
+| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | options of item count per page | number[] | — |  [10, 20, 30, 40, 50, 100] |

 ### Events
@@ -164,3 +164,8 @@ Add more modules based on your scenario.
 |---------|--------|---------|
 | size-change | triggers when `page-size` changes | the new `page-size` |
 | current-change | triggers when `current-page` changes | the new `current-page` |
+
+### Slot
+| Name | Description |
+| --- | --- |
+| — | custom content. To use this, you need to declare `slot` in `layout` |
--- a/examples/docs/en-US/rate.md
+++ b/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 |
--- a/examples/docs/en-US/select.md
+++ b/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 | — | — |
@@ -636,11 +637,16 @@ Create and select new items that are not included in select options
 | remote | whether options are loaded from server | boolean | — | false |
 | remote-method | custom remote search method | function | — | — |
 | loading | whether Select is loading data from server | boolean | — | false |
+| loading-text | displayed text while loading data from server | string | — | Loading |
+| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
+| no-data-text | displayed text when there is no options | string | — | No data |
+| popper-class | custom class name for Select's dropdown | string | — | — |

 ### Select Events
 | Event Name | Description | Parameters |
 |---------|---------|---------|
 | change | triggers when the selected value changes | current selected value |
+| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |

 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
--- a/examples/docs/en-US/steps.md
+++ b/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 |
--- a/examples/docs/en-US/table.md
+++ b/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.
@@ -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 |
@@ -1197,10 +1380,12 @@ Customize table column so it can be integrated with other components.
 | cell-mouse-enter | triggers when hovering into a cell| row, column, cell, event |
 | 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-click | triggers when clicking a row | row, event, column |
+| 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 } |
+| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |

 ### Table Methods
@@ -1214,6 +1399,7 @@ Customize table column so it can be integrated with other components.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1)  | string | selection/index | — |
 | label | column label | string | — | — |
+| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | - | - |
 | prop |  field name. You can also use its alias: `property` | string | — | — |
 | width | column width | string | — | — |
 | min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — |
--- a/examples/docs/en-US/tabs.md
+++ b/examples/docs/en-US/tabs.md
@@ -142,6 +142,6 @@ Border card tabs.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
-| label-content | render function for tab title | Function(h) | - | - |
+| label-content | render function for tab title | Function(h, tab:vueInstance) | - | - |
 | 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' |
--- a/examples/docs/en-US/tag.md
+++ b/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
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -151,6 +151,7 @@ Can pick an arbitrary time range.
 | 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 |
 | align | alignment | left/center/right | left |
+| popper-class | custom class name for TimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |

 ### Time Select Options
@@ -164,4 +165,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 | — | — |
--- a/examples/docs/en-US/tooltip.md
+++ b/examples/docs/en-US/tooltip.md
@@ -205,3 +205,4 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
 |  options        | [popper.js](https://popper.js.org/documentation.html) parameters | Object            | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | openDelay | delay of appearance, in millisecond | number | — | 0 |
 | manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true`事件将不会生效 | boolean | — | false |
+|  popper-class  |  custom class name for Tooltip's popper | string | — | — |
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -224,7 +224,9 @@ Used for node selection. In the following example, data for each layer is acquir
 | load | method for loading subtree data | function(node, resolve) | — | — |
 | render-content | render function for tree node | Function(h, { node } | - | - |
 | highlight-current | whether current node is highlighted | boolean | - | false |
+| current-node-key | key of current node, a set only prop | string, number | - | - |
 | default-expand-all | whether to expand all nodes by default | boolean | - | false |
+| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.  | - | true |
 | auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true |
 | default-expanded-keys | array of keys of initially expanded nodes | array | — | — |
 | show-checkbox | whether node is selectable | boolean | — | false |
@@ -243,16 +245,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 |
+| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |

--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -161,6 +161,7 @@ on-preview | hook function when clicking the uploaded files | function(file) |
 on-remove | hook function when files are removed | function(file, fileList) | — | —
 on-success | hook function when uploaded successfully | function(response, file, fileList) | — | —
 on-error | hook function when some errors occurs | function(err, response, file) | — | —
+on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |
 before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` or a `Promise` is returned, uploading will be aborted | function(file) | — | —
 thumbnail-mode | whether thumbnail is displayed | boolean | — | false
 default-file-list | default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
--- a/examples/docs/zh-CN/button.md
+++ b/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 |
--- a/examples/docs/zh-CN/custom-theme.md
+++ b/examples/docs/zh-CN/custom-theme.md
@@ -20,7 +20,7 @@ npm i https://github.com/ElementUI/theme-default -D
 主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。

 ```shell
-et -i [可以自定义变量文件目录]
+et -i [可以自定义变量文件]

 > ✔ Generator variables file
 ```
--- a/examples/docs/zh-CN/date-picker.md
+++ b/examples/docs/zh-CN/date-picker.md
@@ -291,19 +291,20 @@
 | 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 |  — | {} |
+| popper-class | DatePicker 下拉框的类名 | string | — | — |
+|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 | — | — |
--- a/examples/docs/zh-CN/datetime-picker.md
+++ b/examples/docs/zh-CN/datetime-picker.md
@@ -235,21 +235,22 @@
 | 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 |  — | {} |
+| popper-class | DateTimePicker 下拉框的类名 | string | — | — |
+| 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 | — | — |


--- a/examples/docs/zh-CN/dropdown.md
+++ b/examples/docs/zh-CN/dropdown.md
@@ -156,6 +156,7 @@
 | split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
 | menu-align    | 菜单水平对齐方向     | string          | start, end  | end |
 | trigger       | 触发下拉的行为     | string          | hover, click  | hover |
+| hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | -  | true |

 ### Dropdown Events
 | 事件名称      | 说明    | 回调参数      |
--- a/examples/docs/zh-CN/i18n.md
+++ b/examples/docs/zh-CN/i18n.md
@@ -70,6 +70,7 @@ Vue.component(Select.name, Select)
  <li>巴西葡萄牙语（pt-br）</li>
  <li>波斯语（fa）</li>
  <li>泰语（th）</li>
+  <li>印尼语（id）</li>
 </ul>

 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
--- a/examples/docs/zh-CN/installation.md
+++ b/examples/docs/zh-CN/installation.md
@@ -4,7 +4,7 @@
 推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。

 ```shell
-npm i element-ui -D
+npm i element-ui -S
 ```

 ### CDN
@@ -50,4 +50,4 @@ npm i element-ui -D
  </script>
 </html>
 ```
-如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
+如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
--- a/examples/docs/zh-CN/loading.md
+++ b/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 |
--- a/examples/docs/zh-CN/menu.md
+++ b/examples/docs/zh-CN/menu.md
@@ -108,6 +108,10 @@
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项1</el-menu-item>
+        </el-submenu>
      </el-submenu>
      <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
      <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
@@ -125,6 +129,10 @@
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项1</el-menu-item>
+        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">导航二</el-menu-item>
      <el-menu-item index="3">导航三</el-menu-item>
@@ -140,16 +148,6 @@
      <el-menu-item-group title="分组二">
        <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
        <el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
-        <!-- <el-submenu index="5">
-          <template slot="title">导航五</template>
-          <el-menu-item-group title="分组一">
-            <el-menu-item index="5-1">选项1</el-menu-item>
-            <el-menu-item index="5-2">选项2</el-menu-item>
-          </el-menu-item-group>
-          <el-menu-item-group title="分组二">
-            <el-menu-item index="5-3">选项3</el-menu-item>
-          </el-menu-item-group>
-        </el-submenu> -->
      </el-menu-item-group>
    </el-menu>
  </el-col>
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -241,7 +241,8 @@ 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） |
--- a/examples/docs/zh-CN/message.md
+++ b/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 | — | — |
--- a/examples/docs/zh-CN/notification.md
+++ b/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 |
--- a/examples/docs/zh-CN/pagination.md
+++ b/examples/docs/zh-CN/pagination.md
@@ -206,7 +206,7 @@
 | total | 总条目数 | Number | — | - |
 | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | - |
 | current-page | 当前页数 | Number | — | 1 |
-| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
+| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |

 ### Events
@@ -214,3 +214,8 @@
 |---------|--------|---------|
 | size-change | pageSize 改变时会触发 | 每页条数`size` |
 | current-change | currentPage 改变时会触发 | 当前页`currentPage` |
+
+### Slot
+| name | 说明 |
+|------|--------|
+| — | 自定义内容，需要在 `layout` 中列出 `slot` |
--- a/examples/docs/zh-CN/rate.md
+++ b/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 |
--- a/examples/docs/zh-CN/select.md
+++ b/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 | — | — |
@@ -638,11 +639,16 @@
 | remote | 是否为远程搜索 | boolean | — | false |
 | remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
+| loading-text | 远程加载时显示的文字 | string | — | 加载中 |
+| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
+| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
+| popper-class | Select 下拉框的类名 | string | — | — |

 ### Select Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|---------|---------|
 | change | 选中值发生变化时触发 | 目前的选中值 |
+| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |

 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
--- a/examples/docs/zh-CN/slider.md
+++ b/examples/docs/zh-CN/slider.md
@@ -143,7 +143,7 @@
 ```
 :::

-## Attributes
+### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | min | 最小值 | number | — | 0 |
@@ -153,7 +153,7 @@
 | show-input | 是否显示输入框 | boolean | — | false |
 | show-stops | 是否显示间断点 | boolean | — | false |

-## Events
+### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change | 值改变时触发 | 改变后的值 |
--- a/examples/docs/zh-CN/steps.md
+++ b/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 | 说明  |
--- a/examples/docs/zh-CN/switch.md
+++ b/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 |
--- a/examples/docs/zh-CN/table.md
+++ b/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>
+```
+:::
+
 ### 多级表头

 数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
@@ -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
 | 事件名 | 说明 | 参数 |
@@ -1206,10 +1388,12 @@
 | cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
 | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
 | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
-| row-click | 当某一行被点击时会触发该事件 | row, event |
+| row-click | 当某一行被点击时会触发该事件 | row, event, column |
+| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event |
 | row-dblclick | 当某一行被双击时会触发该事件 | row, event |
 | header-click | 当某一列的表头被点击时会触发该事件 | column, event |
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
+| filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |

 ### Table Methods
@@ -1222,6 +1406,7 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
+| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | - | - |
 | label | 显示的标题 | string | — | — |
 | prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
 | width | 对应列的宽度 | string | — | — |
--- a/examples/docs/zh-CN/tabs.md
+++ b/examples/docs/zh-CN/tabs.md
@@ -137,6 +137,6 @@
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
-| label-content | 选项卡的标题的渲染 Function | Function(h) | - | - |
+| label-content | 选项卡的标题的渲染 Function | Function(h, tab:vueInstance) | - | - |
 | disabled | 是否禁用 | boolean | - | false |
 | name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
--- a/examples/docs/zh-CN/tag.md
+++ b/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
--- a/examples/docs/zh-CN/time-picker.md
+++ b/examples/docs/zh-CN/time-picker.md
@@ -156,9 +156,10 @@
 | 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 | — | {} |
+| popper-class | TimePicker 下拉框的类名 | string | — | — |
+| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |

 ### Time Select Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -171,5 +172,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 | — | — |

--- a/examples/docs/zh-CN/tooltip.md
+++ b/examples/docs/zh-CN/tooltip.md
@@ -209,3 +209,4 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | openDelay | 延迟出现，单位毫秒 | Number | — | 0 |
 | manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
+| popper-class | 为 Tooltip 的 popper 添加类名 | String | - | -|
--- a/examples/docs/zh-CN/tree.md
+++ b/examples/docs/zh-CN/tree.md
@@ -236,7 +236,9 @@
 | load | 加载子树数据的方法 | function(node, resolve) | — | — |
 | render-content | 树节点的内容区的渲染 Function | Function(h, { node } | - | - |
 | highlight-current | 是否高亮当前选中节点，默认值是 false。| boolean | - | false |
+| current-node-key | 当前选中节点的 key，是一个只写属性 | string, number | - | - |
 | default-expand-all | 是否默认展开所有节点 | boolean | - | false |
+| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | - | false |
 | auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
 | default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — |
 | show-checkbox | 节点是否可被选择 | boolean | — | false |
@@ -255,14 +257,15 @@
 | 方法名 | 说明 | 参数 |
 |------|--------|------|
 | 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` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
+| current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 |
--- a/examples/docs/zh-CN/upload.md
+++ b/examples/docs/zh-CN/upload.md
@@ -156,7 +156,7 @@
 ```
 :::

-### Upload Attribute
+### Attribute
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | action | 必选参数, 上传的地址 | string | — | — |
@@ -172,11 +172,12 @@
 | on-remove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
 | on-success | 可选参数, 文件上传成功时的钩子 | function(response, file, fileList) | — | — |
 | on-error | 可选参数, 文件上传失败时的钩子 | function(err, response, file) | — | — |
+| on-progress | 可选参数, 文件上传时的钩子 | function(event, file, fileList) | — | — |
 | before-upload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
 | thumbnail-mode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | — | false |
 | default-file-list | 默认已上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |

-### Upload Methods
+### Methods
 | 方法名      | 说明          | 参数 |
 |---------- |-------------- | - |
 | clearFiles | 清空已上传的文件列表 | — |
--- a/examples/pages/template/component.tpl
+++ b/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;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
  "description": "A Component Library for Vue.js.",
  "main": "lib/element-ui.common.js",
  "files": [
@@ -9,7 +9,7 @@
    "packages"
  ],
  "scripts": {
-    "bootstrap": "npm i",
+    "bootstrap": "yarn || npm i",
    "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js",
    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default",
    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
@@ -22,7 +22,7 @@
    "dist:all": "node build/bin/build-all.js && npm run build:theme",
    "i18n": "node build/bin/i18n.js",
    "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
-    "pub": "sh build/git-release.sh && sh build/release.sh",
+    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh",
    "pub:all": "npm run dist:all && lerna publish",
    "test": "npm run lint && CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
    "test:watch": "karma start test/unit/karma.conf.js"
@@ -46,7 +46,7 @@
    "babel-helper-vue-jsx-merge-props": "^2.0.0",
    "deepmerge": "^1.2.0",
    "throttle-debounce": "^1.0.1",
-    "vue-popup": "^0.2.12",
+    "vue-popup": "^0.2.14",
    "wind-dom": "0.0.3"
  },
  "peerDependencies": {
@@ -111,11 +111,11 @@
    "transliteration": "^1.1.11",
    "uppercamelcase": "^1.1.0",
    "url-loader": "^0.5.7",
-    "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",
+    "vue-template-compiler": "2.0.5",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1",
    "webpack-node-externals": "^1.5.4"
--- a/packages/alert/README.md
+++ b/packages/alert/README.md
@@ -0,0 +1,58 @@
+# element-alert
+> A element-alert component for Vue.js.
+
+## Demo
+http://element-component.github.io/el-alert
+
+## Installation
+```shell
+npm i element-alert -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElAlert from 'element-alert'
+import 'element-theme-default/dist/alert.css'
+
+Vue.use(ElAlert)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import ElAlert from 'element-alert'
+
+Vue.component('el-alert', ElAlert)
+```
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| **title** | 标题，**必选参数** | string | — | — |
+| type | 主题 | string | success/warning/info/error | info |
+| description | 辅助性文字 | string | — | — |
+| render-content | 内容区域的渲染函数，会覆盖 `description` | function(h) | — | — |
+| closable | 是否可关闭 | boolean | — | true |
+| close-text | 关闭按钮自定义文本 | string | — | — |
+| show-icon | 是否显示图标 | boolean | — | false |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| close | 关闭alert时触发的事件 | — |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/alert/package.json
+++ b/packages/alert/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "el-alert",
-  "version": "0.0.0",
+  "name": "element-alert",
+  "version": "1.0.0",
  "description": "A alert component for Vue.js.",
  "keywords": [
    "element",
--- a/packages/autocomplete/README.md
+++ b/packages/autocomplete/README.md
@@ -0,0 +1,57 @@
+# el-autocomplete
+> A element-autocomplete component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-autocomplete
+
+## Installation
+```shell
+npm i element-autocomplete -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElAutocomplete from 'element-autocomplete'
+import 'element-theme-default/dist/autocomplete.css'
+
+Vue.use(ElAutocomplete)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import ElAutocomplete from 'element-autocomplete'
+
+Vue.component('el-autocomplete', ElAutocomplete)
+```
+
+### Attributes
+
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| placeholder   | 输入框占位文本   | string          | — | — |
+| disabled      | 禁用            | boolean         | — | false   |
+| value         | 必填值输入绑定值   | string  | — | — |
+| custom-item  | 通过该参数指定自定义的输入建议列表项的组件名 | string  | — | — |
+| fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  | — | — |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| select | 点击选中建议项时触发 | 选中建议项 |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/autocomplete/package.json
+++ b/packages/autocomplete/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-autocomplete",
+  "name": "element-autocomplete",
  "version": "1.0.0",
  "description": "A autocomplete component for Vue.",
  "keywords": [
--- a/packages/badge/README.md
+++ b/packages/badge/README.md
@@ -0,0 +1,49 @@
+# element-badge
+> A element-badge component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-badge
+
+## Installation
+```shell
+npm i element-badge -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElBadge from 'element-badge'
+import 'element-theme-default/dist/badge.css'
+
+Vue.use(ElBadge)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import ElBadge from 'element-badge'
+
+Vue.component('el-badge', ElBadge)
+```
+
+### Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| value          | 显示值      | string, number          |          —             |    —     |
+| max          |  最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |
+| is-dot       | 小圆点    | boolean  |  —  |  false |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/badge/package.json
+++ b/packages/badge/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-badge",
+  "name": "element-badge",
  "version": "0.0.0",
  "description": "A badge component for Vue.js.",
  "keywords": [
--- a/packages/breadcrumb/README.md
+++ b/packages/breadcrumb/README.md
@@ -0,0 +1,55 @@
+# element-breadcrumb
+> A element-breadcrumb component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-breadcrumb
+
+## Installation
+```shell
+npm i element-breadcrumb -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElBreadcrumb from 'element-breadcrumb'
+import 'element-theme-default/dist/breadcrumb.css'
+
+Vue.use(ElBreadcrumb)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElBreadcrumb } from 'element-breadcrumb'
+import { ElBreadcrumbItem } from 'element-breadcrumb'
+
+Vue.component('el-breadcrumb', ElBreadcrumb)
+Vue.component('el-breadcrumb-item', ElBreadcrumbItem)
+```
+
+### Breadcrumb Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| separator | 分隔符 | string | — | 斜杠'/' |
+
+### Breadcrumb Item Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| to        | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — |
+| replace   | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/breadcrumb/_index.js
+++ b/packages/breadcrumb/_index.js
@@ -0,0 +1,13 @@
+import ElBreadcrumb from './src/breadcrumb';
+import ElBreadcrumbItem from './src/breadcrumb-item.vue';
+
+/* istanbul ignore next */
+export default function install(Vue) {
+  Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem);
+  Vue.component(ElBreadcrumb.name, ElBreadcrumb);
+};
+
+export {
+  ElBreadcrumb,
+  ElBreadcrumbItem
+};
--- a/packages/breadcrumb/cooking.conf.js
+++ b/packages/breadcrumb/cooking.conf.js
@@ -4,7 +4,7 @@ var config = require('../../build/config');

 cooking.set({
  entry: {
-    index: path.join(__dirname, 'index.js')
+    index: path.join(__dirname, '_index.js')
  },
  dist: path.join(__dirname, 'lib'),
  template: false,
--- a/packages/breadcrumb/package.json
+++ b/packages/breadcrumb/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-breadcrumb",
+  "name": "element-breadcrumb",
  "version": "1.0.0",
  "description": "A breadcrumb component for Vue.",
  "keywords": [
--- a/packages/button/README.md
+++ b/packages/button/README.md
@@ -0,0 +1,56 @@
+# element-button
+> A element-button component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-button
+
+## Installation
+```shell
+npm i element-button -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElButton from 'element-button'
+import 'element-theme-default/dist/button.css'
+
+Vue.use(ElButton)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElButton } from 'element-button'
+import { ElButtonGroup } from 'element-button'
+
+Vue.component('el-button', ElButton)
+Vue.component('el-button-group', ElButtonGroup)
+```
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| size     | 尺寸   | string  |   large,small,mini            |    —     |
+| type     | 类型   | string    |   primary,success,warning,danger,info,text |     —    |
+| plain     | 是否朴素按钮   | Boolean    | — | false   |
+| loading     | 是否加载中状态   | Boolean    | — | false   |
+| disabled  | 是否禁用状态    | boolean   | —   | false   |
+| icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
+| autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |
+| native-type | 原生 type 属性 | string | button,submit,reset | button |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-button",
+  "name": "element-button",
  "version": "1.0.0",
  "description": "A button component for Vue.",
  "keywords": [
--- a/packages/card/README.md
+++ b/packages/card/README.md
@@ -0,0 +1,48 @@
+# element-card
+> A element-card component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-card
+
+## Installation
+```shell
+npm i element-card -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElCard from 'element-card'
+import 'element-theme-default/dist/card.css'
+
+Vue.use(ElCard)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import ElCard from 'element-card'
+
+Vue.component('el-card', ElCard)
+```
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |
+| body-style | 设置 body 的样式| object| — | { padding: '20px' } |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/card/package.json
+++ b/packages/card/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "el-card",
-  "version": "0.0.0",
+  "name": "element-card",
+  "version": "1.0.0",
  "description": "A card component for Vue.js.",
  "keywords": [
    "element",
--- a/packages/checkbox/README.md
+++ b/packages/checkbox/README.md
@@ -1,18 +1,18 @@
-# el-checkbox
-> A el-checkbox component for Vue.js.
+# element-checkbox
+> A element-checkbox component for Vue.js.

 ## Demo
-http://element-component.github.io/el-checkbox
+http://element-component.github.io/element-checkbox

 ## Installation
 ```shell
-npm i el-checkbox -D
+npm i element-checkbox -D
 ```

 ## Usage
 ```javascript
 import Vue from 'vue'
-import ElCheckbox from 'el-checkbox'
+import ElCheckbox from 'element-checkbox'
 import 'element-theme-default/dist/checkbox.css'

 Vue.use(ElCheckbox)
@@ -22,19 +22,28 @@ or

 ```javascript
 import Vue from 'vue'
-import { ElCheckbox } from 'el-checkbox'
+import { ElCheckbox } from 'element-checkbox'
+import { ElCheckboxGroup } from 'element-checkbox'

 Vue.component('el-checkbox', ElCheckbox)
+Vue.component('el-checkbox-group', ElCheckboxGroup)
 ```

-
-## Options
+### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| model     | 绑定值   | string[]  |               |         |
-| value     | 真实值   | string    |               |         |
-| label     | 显示值，不填则显示 value   | string    |               |         |
-| disabled  | 禁用    | boolean   | true, false   | false   |
+| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string    |       —        |     —    |
+| true-label | 选中时的值   | string, number | — |     —    |
+| false-label | 没有选中时的值   | string, number    |      —         |     —    |
+| name | 原生 name 属性 | string    |      —         |     —    |
+| disabled  | 按钮禁用    | boolean   |  — | false   |
+| checked  | 当前是否勾选    | boolean   |  — | false   |
+| indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |
+
+### Checkbox-group Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change  | 当绑定值变化时触发的事件 | event 事件对象 |

 ## Development
 ```shell
--- a/packages/checkbox/index.js
+++ b/packages/checkbox/index.js
@@ -6,4 +6,3 @@ ElCheckbox.install = function(Vue) {
 };

 export default ElCheckbox;
-
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-checkbox",
+  "name": "element-checkbox",
  "version": "1.0.2",
  "description": "A checkbox component for Vue.",
  "keywords": [
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -49,17 +49,27 @@

    componentName: 'ElCheckbox',

+    data() {
+      return {
+        selfModel: false
+      };
+    },
+
    computed: {
      model: {
        get() {
-          return this.isGroup ? this.store : this.value;
+          return this.isGroup
+            ? this.store : this.value !== undefined
+            ? this.value : this.selfModel;
        },

        set(val) {
          if (this.isGroup) {
            this.dispatch('ElCheckboxGroup', 'input', [val]);
-          } else {
+          } else if (this.value !== undefined) {
            this.$emit('input', val);
+          } else {
+            this.selfModel = val;
          }
        }
      },
@@ -88,7 +98,7 @@
      },

      store() {
-        return this._checkboxGroup.value;
+        return this._checkboxGroup ? this._checkboxGroup.value : this.value;
      }
    },

@@ -105,8 +115,11 @@

    methods: {
      addToStore() {
-        if (Array.isArray(this.model)) {
-          this.model.indexOf(this.label) === -1 && this.model.push(this.label);
+        if (
+          Array.isArray(this.model) &&
+          this.model.indexOf(this.label) === -1
+        ) {
+          this.model.push(this.label);
        } else {
          this.model = this.trueLabel || true;
        }
--- a/packages/col/README.md
+++ b/packages/col/README.md
@@ -0,0 +1,54 @@
+# element-col
+> A element-col component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-col
+
+## Installation
+```shell
+npm i element-col -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElCol from 'element-col'
+import 'element-theme-default/dist/col.css'
+
+Vue.use(ElCol)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import ElCol from 'element-col'
+
+Vue.component('el-col', ElCol)
+```
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| span | 栅格占据的列数 | number | — | — |
+| offset | 栅格左侧的间隔格数 | number | — | 0 |
+| push |  栅格向右移动格数 | number | — | 0 |
+| pull |  栅格向左移动格数 | number | — | 0 |
+| xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| md | `≥992` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| lg | `≥1200` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/col/package.json
+++ b/packages/col/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-col",
+  "name": "element-col",
  "version": "1.0.0",
  "description": "A row component for Vue.",
  "keywords": [
--- a/packages/date-picker/README.md
+++ b/packages/date-picker/README.md
@@ -1,9 +1,9 @@
-# el-date-picker
+# element-datepicker


 ## Installation
 ```shell
-npm i el-date-picker -S
+npm i element-datepicker -S
 ```

 ## Usage
@@ -11,7 +11,7 @@ npm i el-date-picker -S
 A:
 ```javascript
 import Vue from 'vue'
-import ElDatePicker from 'el-date-picker'
+import ElDatePicker from 'element-datepicker'

 Vue.use(ElDatePicker)
 ```
@@ -19,7 +19,7 @@ Vue.use(ElDatePicker)
 B:
 ```javascript
 import Vue from 'vue'
-import { DatePicker, TimePicker, TimeSelect } from 'el-date-picker'
+import { DatePicker, TimePicker, TimeSelect } from 'element-datepicker'

 Vue.component(DatePicker.name, DatePicker);
 Vue.component(TimePicker.name, TimePicker);
@@ -29,11 +29,36 @@ Vue.component(TimeSelect.name, TimeSelect);
 C:
 ```html
 <script src="path/to/vue/dist/vue.js"></script>
-<script src="path/to/el-date-picker/index.js"></script>
+<script src="path/to/el-datepicker/index.js"></script>
 <script>
  Vue.use(ElDatePicker);
 </script>
 ```

+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| readonly | 完全只读 | boolean | — | false |
+| disabled | 禁用 | boolean | - | false |
+| editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
+| placeholder | 占位内容 | string | — | — |
+| 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 | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
+
+### Picker Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | - | - |
+| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
+
+### Shortcuts
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| text | 标题文本 | string | — | — |
+| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
+
 ## License
 MIT
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-datepicker",
+  "name": "element-datepicker",
  "version": "1.0.0",
  "description": "A datepicker component for Vue.",
  "keywords": [
--- a/packages/date-picker/src/basic/date-table.vue
+++ b/packages/date-picker/src/basic/date-table.vue
@@ -231,7 +231,7 @@
        }

        if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') &&
-          this.year === this.date.getFullYear() && this.month === this.date.getMonth() && monthDate === Number(cell.text)) {
+          Number(this.year) === this.date.getFullYear() && this.month === this.date.getMonth() && monthDate === Number(cell.text)) {
          classes.push('current');
        }

--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -4,10 +4,10 @@
      v-show="visible"
      :style="{ width: width + 'px' }"
      class="el-picker-panel el-date-range-picker"
-      :class="{
+      :class="[{
        'has-sidebar': $slots.sidebar || shortcuts,
        'has-time': showTime
-      }">
+      }, popperClass]">
      <div class="el-picker-panel__body-wrapper">
        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
        <div class="el-picker-panel__sidebar" v-if="shortcuts">
@@ -136,7 +136,7 @@
        <button
          type="button"
          class="el-picker-panel__btn"
-          @click="handleConfirm"
+          @click="handleConfirm()"
          :disabled="btnDisabled">{{ t('el.datepicker.confirm') }}</button>
      </div>
    </div>
@@ -215,6 +215,7 @@

    data() {
      return {
+        popperClass: '',
        minPickerWidth: 0,
        maxPickerWidth: 0,
        date: new Date(),
@@ -282,7 +283,8 @@
        } else if (Array.isArray(newVal)) {
          this.minDate = newVal[0] ? toDate(newVal[0]) : null;
          this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
-          this.date = new Date(this.minDate);
+          if (this.minDate) this.date = new Date(this.minDate);
+          this.handleConfirm(true);
        }
      }
    },
@@ -454,8 +456,8 @@
        this.resetDate();
      },

-      handleConfirm() {
-        this.$emit('pick', [this.minDate, this.maxDate]);
+      handleConfirm(visible) {
+        this.$emit('pick', [this.minDate, this.maxDate], visible);
      },

      resetDate() {
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -6,10 +6,10 @@
        width: width + 'px'
      }"
      class="el-picker-panel el-date-picker"
-      :class="{
+      :class="[{
        'has-sidebar': $slots.sidebar || shortcuts,
        'has-time': showTime
-      }">
+      }, popperClass]">
      <div class="el-picker-panel__body-wrapper">
        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
        <div class="el-picker-panel__sidebar" v-if="shortcuts">
@@ -150,6 +150,7 @@
      },

      value(newVal) {
+        if (!newVal) return;
        newVal = new Date(newVal);
        if (!isNaN(newVal)) {
          if (typeof this.disabledDate === 'function' &&
@@ -366,6 +367,7 @@

    data() {
      return {
+        popperClass: '',
        pickerWidth: 0,
        date: new Date(),
        value: '',
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -6,7 +6,8 @@
    <div
      v-show="visible"
      :style="{ width: width + 'px' }"
-      class="el-time-range-picker el-picker-panel">
+      class="el-time-range-picker el-picker-panel"
+      :class="popperClass">
      <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>
@@ -97,6 +98,7 @@
      const time = clacTime(this.$options.defaultValue);

      return {
+        popperClass: '',
        minTime: time.minTime,
        maxTime: time.maxTime,
        btnDisabled: isDisabled(time.minTime, time.maxTime),
@@ -112,6 +114,13 @@
      };
    },

+    watch: {
+      value(newVal) {
+        this.panelCreated();
+        this.$nextTick(_ => this.ajustScrollTop());
+      }
+    },
+
    methods: {
      panelCreated() {
        const time = clacTime(this.value);
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -3,7 +3,8 @@
    <div
      v-show="visible"
      :style="{ width: width + 'px' }"
-      class="el-picker-panel time-select">
+      class="el-picker-panel time-select"
+      :class="popperClass">
      <div class="el-picker-panel__content">
        <div class="time-select-item"
          v-for="item in items"
@@ -90,6 +91,7 @@

    data() {
      return {
+        popperClass: '',
        start: '09:00',
        end: '18:00',
        step: '00:30',
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -3,7 +3,8 @@
    <div
      v-show="currentVisible"
      :style="{width: width + 'px'}"
-      class="el-time-panel">
+      class="el-time-panel"
+      :class="popperClass">
      <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
        <time-spinner
          ref="spinner"
@@ -72,6 +73,7 @@
          minutes: date.getMinutes(),
          seconds: date.getSeconds()
        });
+        this.$nextTick(_ => this.ajustScrollTop());
      },

      selectableRange(val) {
@@ -81,6 +83,7 @@

    data() {
      return {
+        popperClass: '',
        format: 'HH:mm:ss',
        value: '',
        hours: 0,
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -85,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 [];
@@ -186,6 +187,7 @@ export default {
    readonly: Boolean,
    placeholder: String,
    disabled: Boolean,
+    popperClass: String,
    editable: {
      type: Boolean,
      default: true
@@ -300,7 +302,7 @@ export default {
          ).parser;
          const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);

-          if (parsedValue) {
+          if (parsedValue && this.picker) {
            this.picker.value = parsedValue;
          }
          return;
@@ -323,7 +325,6 @@ export default {
    handleMouseEnterIcon() {
      if (this.readonly || this.disabled) return;
      if (!this.valueIsEmpty) {
-        this.visualValue = this.refInput.value;
        this.showClose = true;
      }
    },
@@ -358,15 +359,10 @@ export default {

    handleKeydown(event) {
      const keyCode = event.keyCode;
-      const target = event.target;

      // tab
      if (keyCode === 9) {
        this.pickerVisible = false;
-      // enter
-      } else if (keyCode === 13) {
-        this.pickerVisible = this.picker.visible = false;
-        this.visualValue = target.value;
      }
    },

@@ -382,6 +378,7 @@ export default {
      if (!this.picker) {
        this.panel.defaultValue = this.internalValue;
        this.picker = new Vue(this.panel).$mount(document.createElement('div'));
+        this.picker.popperClass = this.popperClass;
        this.popperElm = this.picker.$el;
        this.picker.width = this.reference.getBoundingClientRect().width;
        this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
--- a/packages/dialog/README.md
+++ b/packages/dialog/README.md
@@ -1,18 +1,18 @@
-# el-dialog
-> A el-dialog component for Vue.js.
+# element-dialog
+> A element-dialog component for Vue.js.

 ## Demo
-http://element-component.github.io/el-dialog
+http://element-component.github.io/element-dialog

 ## Installation
 ```shell
-npm i el-dialog -D
+npm i element-dialog -D
 ```

 ## Usage
 ```javascript
 import Vue from 'vue'
-import ElDialog from 'el-dialog'
+import ElDialog from 'element-dialog'
 import 'element-theme-default'

 Vue.use(ElDialog)
@@ -22,17 +22,42 @@ or

 ```javascript
 import Vue from 'vue'
-import { ElDialog } from 'el-dialog'
+import ElDialog from 'element-dialog'

 Vue.component('el-dialog', ElDialog)
 ```

+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title     | Dialog 的标题 | string    | —                               | —      |
+| size      | Dialog 的大小 | string    | tiny/small/large/full | small |
+| top       | Dialog CSS 中的 top 值（仅在 size 不为 full 时有效） | string    | —                       | 15%     |
+| modal     | 是否需要遮罩层   | boolean   | — | true |
+| lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
+| custom-class      | Dialog 的自定义类名 | string    | — | — |
+| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    | — | true |
+| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    | — | true |
+| show-close | 是否显示关闭按钮 | boolean    | — | true |

-## Options
+### Slot
+| name | 说明 |
+|------|--------|
+| — | Dialog 的内容 |
+| footer | Dialog 按钮操作区的内容 |

-|     name    | description |     type    |   default   |
-|-------------|-------------|-------------|-------------|
-|             |             |             |             |
+### 方法
+每个 `el-dialog` 实例都暴露了如下方法，用于在不显式改变 `v-model` 值的情况下打开 / 关闭实例：
+| 方法名 | 说明 |
+|------|--------|
+| open | 打开当前实例 |
+| close | 关闭当前实例 |
+
+### Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| close  | Dialog 关闭的回调 | — |
+| open  | Dialog 打开的回调 | — |

 ## Development
 ```shell
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-dialog",
+  "name": "element-dialog",
  "version": "1.0.0",
  "description": "A dialog component for Vue.",
  "keywords": [
--- a/packages/dropdown/README.md
+++ b/packages/dropdown/README.md
@@ -0,0 +1,68 @@
+# element-dropdown
+> A element-dropdown component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-dropdown
+
+## Installation
+```shell
+npm i element-dropdown -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElDropdown from 'element-dropdown'
+import 'element-theme-default/dist/dropdown.css'
+
+Vue.use(ElDropdown)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElDropdown } from 'element-dropdown'
+import { ElDropdownMenu } from 'element-dropdown'
+import { ElDropdownItem } from 'element-dropdown'
+
+Vue.component('el-dropdown', ElDropdown)
+Vue.component('el-dropdown-menu', ElDropdownMenu)
+Vue.component('el-dropdown-item', ElDropdownItem)
+```
+
+### Dropdown Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| type          | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效)   | string  |          —             |    —     |
+| size          | 菜单按钮尺寸，同 Button 组件(只在`split-button`为 true 的情况下有效)     | string          | — | — |
+| split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
+| menu-align    | 菜单水平对齐方向     | string          | start, end  | end |
+| trigger       | 触发下拉的行为     | string          | hover, click  | hover |
+
+### Dropdown Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| click  | `split-button` 为 true 时，点击左侧按钮的回调 | — |
+| command  | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
+
+### Dropdown Menu Item Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| command       | 指令     | string          | — | — |
+| disabled      | 禁用     | boolean          | — | false |
+| divided       | 显示分割线     | boolean          | — | false |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/dropdown/_index.js
+++ b/packages/dropdown/_index.js
@@ -0,0 +1,16 @@
+import ElDropdown from './src/dropdown';
+import ElDropdownMenu from './src/dropdown-menu.vue';
+import ElDropdownItem from './src/dropdown-item.vue';
+
+/* istanbul ignore next */
+export default function install(Vue) {
+  Vue.component(ElDropdown.name, ElDropdown);
+  Vue.component(ElDropdownMenu.name, ElDropdownMenu);
+  Vue.component(ElDropdownItem.name, ElDropdownItem);
+};
+
+export {
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem
+};
--- a/packages/dropdown/cooking.conf.js
+++ b/packages/dropdown/cooking.conf.js
@@ -4,7 +4,7 @@ var config = require('../../build/config');

 cooking.set({
  entry: {
-    index: path.join(__dirname, 'index.js')
+    index: path.join(__dirname, '_index.js')
  },
  dist: path.join(__dirname, 'lib'),
  template: false,
--- a/packages/dropdown/package.json
+++ b/packages/dropdown/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-dropdown",
+  "name": "element-dropdown",
  "version": "1.0.0",
  "description": "A dropdown component for Vue.",
  "keywords": [
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -22,7 +22,11 @@
      },
      type: String,
      size: String,
-      splitButton: Boolean
+      splitButton: Boolean,
+      hideOnClick: {
+        type: Boolean,
+        default: true
+      }
    },

    data() {
@@ -78,7 +82,9 @@
        }
      },
      handleMenuItemClick(command, instance) {
-        this.visible = false;
+        if (this.hideOnClick) {
+          this.visible = false;
+        }
        this.$emit('command', command, instance);
      }
    },
--- a/packages/form/README.md
+++ b/packages/form/README.md
@@ -0,0 +1,73 @@
+# element-form
+> A element-form component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-form
+
+## Installation
+```shell
+npm i element-form -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElForm from 'element-form'
+import 'element-theme-default/dist/form.css'
+
+Vue.use(ElForm)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElForm, ElFormItem } from 'element-form'
+
+Vue.component('el-form', ElForm)
+Vue.component('el-form-item', ElForm)
+```
+
+### Form Attributes
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| model   | 表单数据对象 | object      |                  —                |  — |
+| rules    | 表单验证规则 | object | — | — |
+| inline    | 行内表单模式 | boolean | — | false |
+| label-position | 表单域标签的位置 | string |  right/left/top            | right |
+| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
+| label-suffix | 表单域标签的后缀 | string | — | — |
+
+### Form Methods
+
+| 方法名      | 说明          |
+|---------- |-------------- |
+| validate(cb) | 对整个表单进行校验的方法 |
+| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
+| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
+
+### Form-Item Attributes
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| prop    | 表单域 model 字段 | string    | 传入 Form 组件的 `model` 中的字段 | — |
+| label | 标签文本 | string | — | — |
+| label-width | 表单域标签的的宽度，例如 '50px' | string |       —       | — |
+| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
+| rules    | 表单验证规则 | object | — | — |
+| error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-form",
+  "name": "element-form",
  "version": "1.0.0",
  "description": "A form component for Vue.",
  "keywords": [
--- a/packages/input-number/README.md
+++ b/packages/input-number/README.md
@@ -1,53 +1,58 @@
-# el-input
-> A el-input component for Vue.js.
+## element-input-number
+> A element-input-number component for Vue.js.

-# Demo
-http://element-component.github.io/el-input
+## Demo
+http://element-component.github.io/element-input-number

-# Installation
+## Installation
 ```shell
-npm i el-input -D
+npm i element-input-number -D
 ```

-# Usage
+## Usage
 ```javascript
 import Vue from 'vue'
-import ElInput from 'el-input'
-import 'element-theme-default/dist/input.css'
+import ElInputNumber from 'element-input-number'
+import 'element-theme-default/dist/input-number.css'

-Vue.use(ElInput)
+Vue.use(ElInputNumber)
 ```

 or

 ```javascript
 import Vue from 'vue'
-import { ElInput } from 'el-input'
+import ElInputNumber from 'element-input-number'

-Vue.component('el-input', ElInput)
+Vue.component('el-input-number', ElInputNumber)
 ```

-# Options
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|----------|-------------- |----------|--------------------------------  |-------- |
+| value    | 绑定值         | number | — | — |
+| min      | 设置计数器允许的最小值 | number | — | 0 |
+| max      | 设置计数器允许的最大值 | number | — | Infinity |
+| step     | 计数器步长           | number   | — | 1 |
+| size     | 计数器尺寸           | string   | large, small | — |
+| disabled | 是否禁用计数器        | boolean | — | false |
+| controls | 是否使用控制按钮        | boolean | — | true |

-|     name    | description |     type    |   default   |
-|-------------|-------------|-------------|-------------|
-| model | 绑定值，需双向绑定 | string|number ||
-| placeholder | 输入框占位文本 | string ||
-| suggestion | 输入建议 | string[] ||
-| disabled | 是否禁用 | boolean | false |
-| cache | 是否需要缓存 | boolean | false |
-| effect | 输入框效果，允许 text, number, special | string | text |
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| change | 绑定值被改变时触发 | 最后变更的值 |

-# Development
+## Development
 ```shell
 make dev

-# test
+## test
 make test

-# build
+## build
 make build
 ```

-# License
+## License
 [MIT](https://opensource.org/licenses/MIT)
--- a/packages/input-number/package.json
+++ b/packages/input-number/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-input-number",
+  "name": "element-input-number",
  "version": "1.0.1",
  "description": "A input component for Vue.",
  "main": "lib/index.js",
--- a/packages/input-number/src/input-number.vue
+++ b/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);
        }
      }
--- a/packages/input/README.md
+++ b/packages/input/README.md
@@ -1,18 +1,18 @@
-# el-input
-> A el-input component for Vue.js.
+# element-input
+> A element-input component for Vue.js.

 # Demo
-http://element-component.github.io/el-input
+http://element-component.github.io/element-input

 # Installation
 ```shell
-npm i el-input -D
+npm i element-input -D
 ```

 # Usage
 ```javascript
 import Vue from 'vue'
-import ElInput from 'el-input'
+import ElInput from 'element-input'
 import 'element-theme-default/dist/input.css'

 Vue.use(ElInput)
@@ -22,21 +22,38 @@ or

 ```javascript
 import Vue from 'vue'
-import { ElInput } from 'el-input'
+import ElInput from 'element-input'

 Vue.component('el-input', ElInput)
 ```

-# Options
+### Attributes

-|     name    | description |     type    |   default   |
-|-------------|-------------|-------------|-------------|
-| model | 绑定值，需双向绑定 | string|number ||
-| placeholder | 输入框占位文本 | string ||
-| suggestion | 输入建议 | string[] ||
-| disabled | 是否禁用 | boolean | false |
-| cache | 是否需要缓存 | boolean | false |
-| effect | 输入框效果，允许 text, number, special | string | text |
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| type         | 类型   | string  | text/textarea | text |
+| value         | 绑定值           | string, number  | — | — |
+| maxlength     | 最大输入长度      | number          |  —  | — |
+| minlength     | 最小输入长度      | number          | — | — |
+| placeholder   | 输入框占位文本    | string          | — | — |
+| disabled      | 禁用            | boolean         | — | false   |
+| size          | 输入框尺寸，只在 `type!="textarea"` 时有效      | string          | large, small, mini  | — |
+| icon          | 输入框尾部图标    | string          | — | — |
+| rows          | 输入框行数，只对 `type="textarea"` 有效  |  number | — |  2   |
+| autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean/object | — |  false   |
+| auto-complete | 原生属性，自动补全 | string | on, off | off |
+| name | 原生属性 | string | - | -|
+| max | 原生属性，设置最大值 | * | - | - |
+| min | 原生属性，设置最小值 | * | - | - |
+| autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
+| form | 原生属性 | string | - | - |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| click | 点击 Input 内的图标时触发 | event |
+| blur | 在 Input 失去焦点时触发 | event |
+| focus | 在 Input 或得焦点时触发 | event |

 # Development
 ```shell
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Leopoldthecoder	51fab8641f	[release] 1.0.8	2016-12-20 19:01:14 +08:00
Leopoldthecoder	3d3bd7dc09	[build] 1.0.8	2016-12-20 19:01:14 +08:00
Leopoldthecoder	64667a4e8e	update changelog	2016-12-20 18:56:49 +08:00
baiyaaaaa	c69e30e8c1	fix popover test	2016-12-20 18:54:50 +08:00
baiyaaaaa	d2f852a320	add dropdown hide-on-click prop	2016-12-20 18:54:50 +08:00
Leopoldthecoder	98d3905ce9	Changelog: update for 1.0.8	2016-12-20 18:38:49 +08:00
Furybean	a0187d1aba	Table: add filter change event & add column-key for column.	2016-12-20 18:37:31 +08:00
杨奕	f14628254a	add popper-class for DatePicker, Select and Tooltip (#1806 )	2016-12-20 16:38:47 +08:00
杨奕	b158e124da	update anchor (#1829 )	2016-12-20 16:38:21 +08:00
杨奕	5027e86d4f	update bootstrap (#1858 )	2016-12-20 15:26:54 +08:00
杨奕	208891d173	Dialog: fix z-index of non-modal dialogs (#1866 )	2016-12-20 15:26:28 +08:00
baiyaaaaa	076d4303f7	add param to label-content render function	2016-12-20 15:18:10 +08:00
Yuyang Liu	3a774939ef	fix #1827	2016-12-20 14:21:16 +08:00
baiyaaaaa	15e74b6e7d	fix checkbox isGroup bug in computed cached (#1860 )	2016-12-20 14:18:46 +08:00
baiyaaaaa	1db8dc6588	Revert "fix form validate callback params" (#1864 ) This reverts commit `87b13bf0e0`.	2016-12-20 14:17:53 +08:00
杨奕	3a14efeed0	update OpenCollective	2016-12-20 11:51:52 +08:00
JeOam	65aaee6353	fix typo in clickoutside.js (#1848 )	2016-12-20 11:34:16 +08:00
杨奕	ead186153f	Pagination: fix slot (#1846 )	2016-12-20 11:20:57 +08:00
baiyaaaaa	4fa158eb32	add suport for mutil level submenu	2016-12-20 11:06:45 +08:00
baiyaaaaa	e7e104df5d	fix form validate callback params	2016-12-20 11:05:42 +08:00
杨奕	7e6128660c	Add OpenCollective badges	2016-12-20 10:34:10 +08:00
杨奕	1c24a2b294	Switch: update style (#1803 )	2016-12-20 09:18:52 +08:00
杨奕	240fda5af8	Select: add visible-change event (#1849 )	2016-12-20 09:11:10 +08:00
cinwell.li	8712d9f222	Doc: fix custom theme, fixed #1828 (#1837 )	2016-12-20 00:46:29 +08:00
qingwei.li	a915f8a5bb	DatePicker: fix set value, fixed #1773	2016-12-19 15:46:12 +08:00
FuryBean	40f9d83f87	Tree: add expand-on-click-node prop. (#1805 )	2016-12-19 15:38:51 +08:00
baiyaaaaa	1ba0745f00	fix input line-height (#1825 )	2016-12-19 11:16:47 +08:00
baiyaaaaa	4b20374bf1	support use checkbox without transport value	2016-12-19 10:14:48 +08:00
杨奕	217bb5c953	Loading: update spinner animation, fixed #1786 (#1817 )	2016-12-18 21:34:55 +08:00
杨奕	92742dc56a	Select: fix a dropdown update bug (#1784 )	2016-12-18 21:24:02 +08:00
杨奕	8123ee1c48	Slider: fix change event (#1810 )	2016-12-18 21:20:27 +08:00
Adam	71a3b5ad2f	Tag: Fix text wrap (#1785 ) When the width of parent container is too narrow, text in tag will be break into lines. 當父容器寬度不足時，Tag 文字會產生換行的現象	2016-12-18 21:19:03 +08:00
jingsam	2144c02bd3	Update installation.md	2016-12-18 19:48:58 +08:00
FuryBean	6c4f8a6867	Tree: add current-change event & current-node-key. (#1807 )	2016-12-17 14:09:05 +08:00
FuryBean	4614990cb4	Table: add column as third parameter for row-click event. (#1808 )	2016-12-17 14:00:35 +08:00
Rizqy H	12d43adeb3	Add Indonesian translation	2016-12-16 11:01:32 +08:00
baiyaaaaa	a5bdd2cabb	component README update and fix	2016-12-16 10:57:54 +08:00
baiyaaaaa	47c62e9fe0	add progress hook function property (#1782 )	2016-12-15 23:49:29 +08:00
cinwell.li	9f0774813f	Add yarn.lock (#1747 ) * Add yarn.lock * Update travis config * Use yarnpkg registry	2016-12-15 20:42:55 +08:00
cinwell.li	7d6f3606b4	DatePicker: fix datetimerange, fixed #1758 (#1766 )	2016-12-15 18:39:14 +08:00
cinwell.li	6d2f68b24c	Popup: prevent click event bubbles, fixed #1677 (#1754 )	2016-12-15 12:50:08 +08:00
baiyaaaaa	5e692418ff	fix the tab bar dynamic bug	2016-12-15 10:21:09 +08:00
Leopoldthecoder	0414842426	[release] 1.0.7	2016-12-14 15:36:21 +08:00
Leopoldthecoder	19210b6945	[build] 1.0.7	2016-12-14 15:36:21 +08:00
Leopoldthecoder	b5405f2c7a	Changelog: update for 1.0.7	2016-12-14 14:48:41 +08:00
杨奕	d7d8257516	Message & Notification: add iconClass and customClass, fixed #1664 (#1671 )	2016-12-14 13:43:14 +08:00
杨奕	6fa2a7049f	Table: update docs (#1740 )	2016-12-14 13:42:56 +08:00
qingwei.li	3bf624c757	Table: add empty slot, closed #1737 , closed #1730	2016-12-14 13:34:35 +08:00
zheng yu	0ee61e7296	fix: fixed losing focus when drag slider button fast or right click slider button. (#1723 )	2016-12-13 23:12:43 +08:00
baiyaaaaa	22b703739d	improve button docs (#1727 )	2016-12-13 23:10:41 +08:00
杨奕	eeee584d56	MessageBox: add customClass (#1707 )	2016-12-13 22:52:29 +08:00
cinwell.li	cad3d770ed	DatePicker: fix clear button, fixed #1690 (#1710 ) * DatePicker: fix clear button, fixed #1690 * DatePicker: fix reset button style * DatePicker: fix set value * DatePicker: fix test	2016-12-13 22:51:43 +08:00
杨奕	9c7786b203	Select: add size property (#1715 )	2016-12-13 22:42:01 +08:00
杨奕	07b796f8c5	Update README.md	2016-12-13 22:14:11 +08:00
Leopoldthecoder	0d6ef8255c	add logo	2016-12-13 22:00:20 +08:00
杨奕	c1c90217f5	Update README.md	2016-12-13 20:52:52 +08:00
杨奕	7f9b539122	Update README.md	2016-12-13 19:12:08 +08:00
baiyaaaaa	8917704392	support tag color property	2016-12-13 16:57:56 +08:00
Hashem Qolami	998dcce225	Feature table maxHeight (#1560 ) (#1674 ) * ✨ [Table] Added fluid height table with maxHeight prop (#1560) * 🚨 [Table] Added test for maxHeight prop (#1560) * 📚 [Table] Added the documentation of fluid-height table (#1560)	2016-12-13 16:21:59 +08:00
杨奕	b9f7e10f20	README: add donation (#1719 )	2016-12-13 15:56:42 +08:00
baiyaaaaa	36261b6534	support append prepend slot (#1709 )	2016-12-13 14:46:47 +08:00
cinwell.li	105db7c673	Upload: fix file list style (#1701 )	2016-12-13 14:34:22 +08:00
baiyaaaaa	a51eafb705	add old value for input-number change event	2016-12-13 11:46:40 +08:00
杨奕	1db2d64ddc	Tabs: fix empty tab-pane issue, fixed #1608 (#1672 )	2016-12-13 10:36:10 +08:00
杨奕	0ccd537cc8	Select: fix filterable group bug, fixed #1678 (#1679 )	2016-12-13 10:34:53 +08:00
Pierre-Louis Renaudin	15dc895ee6	Add contextmenu event on table row element. (#1663 )	2016-12-10 18:48:07 +08:00