Merge pull request #6 from ElemeFE/dev

merge
2016-12-21 13:30:12 +08:00 · 2016-12-21 13:30:12 +08:00 · e8dd2e0da1
parent d2f6b21bba 3bf6cf6418
commit e8dd2e0da1
262 changed files with 12373 additions and 1348 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,107 @@
 ## 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*
+
+- Added `disabled` attribute for Tabs, #1620
+- Added `size` attribute for DatePicker input, #1440
+- Fixed `datetimerange` DatePicker's panel not showing correct date if initial value is present, #1129
+- Fixed DatePicker display error when switching year, #1607
+- Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604
+- Fixed TimePicker not refreshing value after clicking the clear button, #1583
+- Fixed remote filterable Select display error when its value is an object, #1593
+- Fixed Select's clear button still working bug when it's `disabled`, #1619
+- Fixed Switch's background color error when its `disabled` attribute is dynamically changed, #1627
+- Fixed some style bugs of Table
+
+### 1.0.5
+
+*2016-12-06*
+
+- Fixed Select with async options and binding value displaying value instead of label, #1537
+- Fixed Select reports an error when initial binding value is an empty object, #1533
+- Fixed remote filtering Select not showing dropdown in some conditions, #1531
+- Fixed Slider sometimes drifting a small distance after releasing dragging, #1546
+- Fixed Steps style in IE9, #1543
+- Added Upload generating URL for all file types, #1530
+- Fixed TimeSelect style, removed flexbox, #1335
+
+### 1.0.4
+
+*2016-12-02*
+
+- Added `controls` attribute for Input Number, #1473
+- Fixed Checkbox Group and Radio Group async issue, #1511 #1514
+- Added `offset` attribute for Notification, #1419
+- Fixed Slider's value not accurate issue when dragging rapidly, #1458
+- Fixed Slider incorrectly showing multiple decimal digits issue, #1450
+- Fixed Select's binding value and displayed value not in sync in some conditions
+- Added `multiple-limit` and `allow-create` attributes for Select
+- Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438
+- Fixed Tree's view not updating issue after fetching child nodes' data, #1439
+- Fixed some Table's style issues in windows system, #1464 #1507
+- Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451
+- Added `row-dblclick` event for Table, #1362
+
+### 1.0.3
+
+*2016-11-28*
+
+- Fixed `currentPage` of Pagination not working in some cases, #1336
+- Fixed `month` and `disabledDate` DatePicker's view not refreshing issue when switching year, #1158
+- Fixed `readonly` DatePicker clear button not disabled issue, #1238
+- Fixed Slider not working when binding value is `NaN` or `step` is smaller than 1, #1239 #1282
+- Added multi-header for Table, #1312
+- Added `rowStyle` for Table, #1348
+- Fixed some attributes of TableColumn can not dynamically assigned issue, #1314
+- Added `filter-node-method` attribute and `filter` method for Tree, #1257
+- Added `getCheckedKeys` and `setCheckedKeys` methods for Tree, #1254
+- Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152
+- Fixed Popper not triggering destroy issue when keep-alive, #1359
+- Added object deep validation for Form, #1363
+- Added `append` and `prepend` for Autocomplete, #1369
+- Added dynamic `pageSizes` support for Pagination, #1372
+- Added custom style API for checked buttons in Radio Button, #1380
+- Added assigning title via slot for Menu Group, #1382
+- Fixed DatePicker year switching bug, #1385
+- Added uploaded file list API for Upload, #1393
+- Added multi-type support for `label` attribute of Checkbox, #1400
+- Added `setChecked` method for Tree, #1422
+
 ### 1.0.2

 *2016-11-18*
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -1,5 +1,101 @@
 ## 更新日志

+### 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*
+
+- 新增 Tabs 组件的 `disabled` 属性，#1620
+- 新增 DatePicker 的 input 支持 `size`，#1440
+- 修复 DatePicker 为 `datetimerange` 类型并设置初始值时，面板未显示正确日期的问题，#1129
+- 修复 DatePicker 切换年份时显示异常的问题，#1607
+- 修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604
+- 修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583
+- 修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593
+- 修复 Select 为 `disabled` 时，`clearable` 仍然可以工作的问题，#1619
+- 修复 自定义背景颜色的 Switch 在动态切换 `disabled` 时，背景颜色错误的问题，#1627
+- 修复 Table 的一些样式问题
+
+### 1.0.5
+*2016-12-06*
+
+- 修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537
+- 修复 Select 的初始值为一个空对象时会报错的问题，#1533
+- 修复 Select 远程搜索有时不显示下拉框的问题，#1531
+- 修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546
+- 修复 IE9 下 Steps 的样式问题，#1543
+- 新增 Upload 对所有文件类型生成 URL 的功能，#1530
+- 修复 TimeSelect 的样式，移除 flexbox, #1335
+
+### 1.0.4
+*2016-12-02*
+
+- 新增 Input Number 的 `controls` 属性，#1473
+- 修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514
+- 增加 Notification 的 `offset` 属性，#1419
+- 修复 Slider 在快速拖动时取值不准确的问题，#1458
+- 修复 Slider 在某些情况下绑定值为多位小数的问题，#1450
+- 修复 Select 在某些情况下绑定值和显示值不同步的问题
+- 新增 Select 的 `multiple-limit` 和 `allow-create` 属性
+- 修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438
+- 修复 Tree 有时在获取子级数据后视图不更新的问题，#1439
+- 修复 Table 在 windows 系统下的若干样式问题，#1464 #1507
+- 修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451
+- 新增 Table 的 `row-dblclick` 事件，#1362
+
+### 1.0.3
+*2016-11-28*
+
+- 修复 Pagination 的 `currentPage` 在某些情况下设置无效的情况，#1336
+- 修复 DatePicker 为 `month` 且设置了 `disabledDate` 的情况下切换年份时界面未更新的问题，#1158
+- 修复 DatePicker readonly 时未禁用清除按钮的问题，#1238
+- 修复 Slider 绑定值为 `NaN` 以及 `step` 小于 1 时无法正常工作的问题，#1239 #1282
+- 增加 Table 的多表头功能，#1312
+- 增加 Table 的 `rowStyle` 属性，#1348
+- 修复 TableColumn 的某些属性无法动态设置的问题，#1314
+- 增加 Tree 的 `filter-node-method` 属性和 `filter` 方法，#1257
+- 增加 Tree 的 `getCheckedKeys` 和 `setCheckedKeys` 方法，#1254
+- 重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152
+- 修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359
+- 增加 Form 中深对象验证的支持，#1363
+- 增加 Autocomplete 里的 `append` 和 `prepend` API，#1369
+- 增加 Pagination `pageSizes` 属性的动态支持，#1372
+- 增加 Radio Button 自定义选中按钮样式的 API，#1380
+- 增加 Menu Group 支持通过 slot 来设置 title，#1382
+- 修复 DatePicker 选择年的 bug，#1385
+- 新增 Upload 默认已上传的文件列表 API，#1393
+- 增加 Checkbox `label` 属性绑定的多类型支持，#1400
+- 增加 Tree 的 `setChecked` 方法，#1422
+
 ### 1.0.2
 *2016-11-18*

--- 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,12 +10,15 @@
 ![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.

 ## Links
 - [Home Page](http://element.eleme.io/)
 - [Docs](http://element.eleme.io/#/component)
+- [awesome-element](https://github.com/ElementUI/awesome-element)
 - [FAQ](./FAQ.md)
 - [Customize Theme](http://element.eleme.io/#/en-US/component/custom-theme)
 - Starter Kit
@ -66,5 +72,95 @@ We have collected some [frequently asked questions](https://github.com/ElemeFE/e
 ## Contribution
 Please make sure to read the [Contributing Guide](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md) before making a pull request.

+## Special Thanks
+English documentation is brought to you by SwiftGG Translation Team. Our special thanks go to these fellows:
+- [raychenfj](https://github.com/raychenfj)
+- [kevin](http://thekevin.cn/)
+- [曾小涛](https://github.com/zengxiaotao)
+- [湾仔王二](https://github.com/wanzaiwanger)
+- [BlooDLine](http://www.ibloodline.com/)
+- [陈铭嘉](https://chenmingjia.github.io/)
+- [千叶知风](http://mpc6.com/)
+- [梁杰](http://numbbbbb.com)
+- [Changing](https://github.com/sunzhuo11)
+- [mmoaay](https://github.com/mmoaay)
+
+## Donation
+If you find Element useful, you can buy us a cup of coffee
+<img width="650" src="http://fuss10.elemecdn.com/2/d0/ab1b8e5a1d96bcdcd6092ce0c66ecjpeg.jpeg" alt="">
+
+## 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/build/bin/build-all.js
+++ b/build/bin/build-all.js
@ -19,7 +19,7 @@ Object.keys(components).forEach(key => {
 });

 const paths = componentPaths.join(',');
-const cli = `node_modules/.bin/cooking build -c ${paths} -p`;
+const cli = path.join('node_modules', '.bin', 'cooking') + ` build -c ${paths} -p`;

 execSync(cli, {
  stdio: 'inherit'
--- a/build/cooking.demo.js
+++ b/build/cooking.demo.js
@ -29,6 +29,7 @@ cooking.set({
  publicPath: process.env.CI_ENV || '',
  hash: true,
  devServer: {
+    hostname: '0.0.0.0',
    port: 8085,
    log: false,
    publicPath: '/'
--- a/build/deploy-ci.sh
+++ b/build/deploy-ci.sh
@ -3,16 +3,13 @@ mkdir temp_web
 git config --global user.name "element-bot"
 git config --global user.email "wallement@gmail.com"

-if [[ "$ROT_TOKEN" = "" ]]; then
+if [ "$ROT_TOKEN" = "" ]; then
  echo "Bye~"
  exit 0
 fi

 # release
-if [[ "$TRAVIS_TAG" ]]; then
-  # build sub folder
-  SUB_FOLDER=$(echo $TRAVIS_TAG | grep -o -E '\d+\.\d+')
-
+if [ "$TRAVIS_TAG" ]; then
  # build lib
  npm run dist
  cd temp_web
@ -40,6 +37,12 @@ if [[ "$TRAVIS_TAG" ]]; then
  npm run deploy:build
  cd temp_web
  git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
+  # build sub folder
+  echo $TRAVIS_TAG
+  export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
+  echo $SUB_FOLDER
+
+  SUB_FOLDER='1.0'
  mkdir $SUB_FOLDER
  rm -rf *.js *.css *.map static
  rm -rf $SUB_FOLDER/**
--- 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/components/header.vue
+++ b/examples/components/header.vue
@ -227,10 +227,13 @@
      };
    },
    watch: {
-      '$route.path'() {
+      '$route.path': {
+        immediate: true,
+        handler() {
          this.isHome = /^home/.test(this.$route.name);
          this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
        }
+      }
    },
    computed: {
      lang() {
@ -248,7 +251,6 @@
      }
    },
    mounted() {
-      this.isHome = this.$route.name === 'home';
      function scroll(fn) {
        window.addEventListener('scroll', () => {
          fn();
--- 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
@ -254,11 +254,13 @@ Picking a date range is supported.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | - | false |
+|size | size of Input | string | large/small/mini | — |
 | editable | whether the input is editable | boolean | - | true |
 | placeholder | placeholder | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`, <br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| 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
@ -271,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
@ -210,10 +210,12 @@ Select date and time in one picker.
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | - | false |
 | editable | whether the input is editable | boolean | - | true |
+|size | size of Input | string | large/small/mini | — |
 | placeholder | placeholder | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`, <br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| 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
@ -226,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
@ -104,6 +104,29 @@ Click the triggering element or hover on it.
 </el-row>
 ```
 :::
+
+### Menu hiding behavior
+
+Use `hide-on-click` to define if menu closes on clicking.
+
+:::demo By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.
+```html
+<el-dropdown :hide-on-click="false">
+  <span class="el-dropdown-link">
+    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
+
 ### Dropdown Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
@ -113,6 +136,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/form.md
+++ b/examples/docs/en-US/form.md
@ -537,7 +537,7 @@ Form component allows you to verify your data, helping you find and correct erro
      </el-form-item>
    </el-col>
  </el-form-item>
-  <el-form-item label="Instant delivery">
+  <el-form-item label="Instant delivery" prop="delivery">
    <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="Activity type" prop="type">
@ -766,7 +766,7 @@ Form component allows you to verify your data, helping you find and correct erro
    },
    methods: {
      handleSubmit3(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+        this.$refs.dynamicForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
--- a/examples/docs/en-US/i18n.md
+++ b/examples/docs/en-US/i18n.md
@ -26,13 +26,13 @@ Vue.component(Button.name, Button)
 Vue.component(Select.name, Select)
 ```

-The Chinese language pack is imported by default, even if you're using another language. But with `IgnorePlugin` provided by webpack you can ignore it when building:
+The Chinese language pack is imported by default, even if you're using another language. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale:

 webpack.config.js
 ```javascript
 {
  plugins: [
-    new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/)
+    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
  ]
 }
 ```
@ -51,6 +51,14 @@ Currently Element ships with the following languages:
  <li>Italian (it)</li>
  <li>Korean (ko)</li>
  <li>Japanese (ja)</li>
+  <li>Dutch (nl)</li>
+  <li>Vietnamese (vi)</li>
+  <li>Russian (ru-RU)</li>
+  <li>Turkish (tr-TR)</li>
+  <li>Brazilian Portuguese (pt-br)</li>
+  <li>Farsi (fa)</li>
+  <li>Thai (th)</li>
+  <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/input-number.md
+++ b/examples/docs/en-US/input-number.md
@ -96,6 +96,7 @@ Allows you to define incremental steps.
 |step | incremental step | number | — | 1 |
 |size | size of the component | string | large/small| — |
 |disabled| whether the component is disabled | boolean | — | false |
+|controls| whether to enable the control buttons | boolean | — | true |

 ### Events

--- 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/loading.md
+++ b/examples/docs/en-US/loading.md
@ -200,6 +200,14 @@ The parameter `options` is the configuration of Loading, and its details can be
 let loadingInstance = Loading.service(options);
 loadingInstance.close();
 ```
+Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:
+```javascript
+let loadingInstance1 = Loading.service({ fullscreen: true });
+let loadingInstance2 = Loading.service({ fullscreen: true });
+console.log(loadingInstance1 === loadingInstance2); // true
+```
+Calling the `close` method on any one of them can close this full screen Loading.
+
 If Element is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.

 ### Options
--- 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,9 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title of the MessageBox | string | — | — |
 | message | content of the MessageBox | string | — | — |
-| type | message type, used for icon display | string | success/info/<br>warning/error | — |
+| type | message type, used for icon display | string | success/info/warning/error | — |
+| customClass | custom class name for MessageBox | string | — | — |
+| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel' | — | — |
 | lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
 | showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |
 | showConfirmButton | whether to show a confirm button | boolean | — | true |
--- 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
@ -46,6 +46,14 @@
        });
      },

+      open7() {
+        this.$notify.success({
+          title: 'Success',
+          message: 'This is a success message',
+          offset: 100
+        });
+      },
+
      onClose() {
        console.log('Notification is closed');
      }
@ -165,6 +173,35 @@ We provide four types: success, warning, info and error.
 ```
 :::

+### With offset
+
+Customize Notification's offset from the top edge of the screen
+
+::: demo Set the `offset` attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.
+```html
+<template>
+  <el-button
+      plain
+      @click="open7">
+    Notification with offset
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify.success({
+          title: 'Success',
+          message: 'This is a success message',
+          offset: 100
+        });
+      }
+    }
+  }
+</script>
+```
+
 ### Global method

 Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.
@ -185,8 +222,11 @@ 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 |

 ### Methods
 `Notification` and `this.$notify` returns the current Message instance. To manually close the instance, you can call `close` on it.
--- a/examples/docs/en-US/pagination.md
+++ b/examples/docs/en-US/pagination.md
@ -109,7 +109,7 @@ Add more modules based on your scenario.
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
-        currentPage4: 5
+        currentPage4: 4
      };
    }
  }
@ -117,13 +117,14 @@ Add more modules based on your scenario.
 ```
 :::
 <script>
+  import { addClass } from 'wind-dom/src/class';
  export default {
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
-        currentPage4: 5
+        currentPage4: 4
      };
    },
    methods: {
@ -140,8 +141,8 @@ Add more modules based on your scenario.
        let demos = document.querySelectorAll('.source');
        let firstDemo = demos[0];
        let lastDemo = demos[demos.length - 1];
-        firstDemo.classList.add('first');
-        lastDemo.classList.add('last');
+        addClass(firstDemo, 'first');
+        addClass(lastDemo, 'last');
      });
    }
  }
@ -155,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
@ -163,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/popover.md
+++ b/examples/docs/en-US/popover.md
@ -225,3 +225,8 @@ Of course, you can nest other operations. It's more light-weight than using a di
 | — | text content of popover |
 | reference | HTML element that triggers popover |

+### Events
+| Event Name | Description | 回调参数 |
+|---------|--------|---------|
+| show | triggers when popover shows | - |
+| hide | triggers when popover hides | - |
--- a/examples/docs/en-US/radio.md
+++ b/examples/docs/en-US/radio.md
@ -124,6 +124,8 @@ name | native 'name' attribute | string    |      —         |     —
 Attribute      | Description          | Type      | Accepted Values       | Default  
 ---- | ---- | ---- | ---- | ----
 size | the size of radio buttons | string | large/small | —
+fill  | border and background color when button is active | string   | — | #20a0ff   |
+text-color | font color when button is active | string   | — | #ffffff   |

 ### Radio-group Events

@ -137,7 +139,5 @@ change | triggers when the bound value changes | the label value of the chosen r
 ---- | ---- | ---- | ---- | ----
 label | the value of radio | string/number | — | —
 disabled | whether radio is disabled | boolean | — | false
-fill  | border and background color when button is active | string   | — | #20a0ff   |
-text-color | font color when button is active | string   | — | #ffffff   |


--- 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
@ -62,6 +62,16 @@
          }]
        }],
        options4: [],
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
        cities: [{
          value: 'Beijing',
          label: 'Beijing'
@ -87,9 +97,10 @@
        value4: '',
        value5: [],
        value6: '',
-        value7: [],
+        value7: '',
        value8: '',
        value9: [],
+        value10: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
      };
@ -569,24 +580,73 @@ Enter keywords and search data from server.
 ```
 :::

+### Create new items
+Create and select new items that are not included in select options
+:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
+```html
+<template>
+  <el-select
+    v-model="value10"
+    multiple
+    filterable
+    allow-create
+    placeholder="Choose tags for your article">
+    <el-option
+      v-for="item in options5"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
+        value10: []
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Select Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | 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 | — | — |
 | placeholder | placeholder | string | — | Select |
 | filterable | whether Select is filterable | boolean | — | false |
+| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
 | filter-method | custom filter method | function | — | — |
 | 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);
      }
    },

@ -683,6 +737,133 @@ When you have huge chunks of data to put in a table, you can fix the header and
 ```
 :::

+### Fluid-height Table with fixed header (and columns)
+
+When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.
+
+:::demo  By setting the attribute `max-height` of `el-table`, you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.
+```html
+<template>
+  <el-table
+    :data="tableData4"
+    border
+    style="width: 100%"
+    max-height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Name"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="State"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="City"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Address"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Zip"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      inline-template
+      :context="_self"
+      fixed="right"
+      label="Operations"
+      width="120">
+      <span>
+        <el-button
+          @click.native.prevent="deleteRow($index, tableData4)"
+          type="text"
+          size="small">
+          Remove
+        </el-button>
+      </span>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
+      }
+    },
+    data() {
+      return {
+        tableData4: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Grouping table head

 When the data structure is complex, you can use group header to show the data hierarchy.
@ -875,7 +1056,7 @@ You can also select multiple rows.
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
-      width="50">
+      width="55">
    </el-table-column>
    <el-table-column
      inline-template
@ -1111,7 +1292,7 @@ Customize table column so it can be integrated with other components.
      <el-popover trigger="hover" placement="top">
        <p>Name: {{ row.name }}</p>
        <p>Addr: {{ row.address }}</p>
-        <div slot="reference">
+        <div slot="reference" class="name-wrapper">
          <el-tag>{{ row.name }}</el-tag>
        </div>
      </el-popover>
@ -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,9 +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
@ -1213,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,4 +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, 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
@ -146,10 +146,12 @@ Can pick an arbitrary time range.
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | - | false |
 | editable | whether the input is editable | boolean | - | true |
+|size | size of Input | string | large/small/mini | — |
 | placeholder | placeholder | string | — | — |
 | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | 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
@ -163,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,15 +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
@ -289,20 +289,22 @@
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | - | false |
 | editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
 | placeholder | 占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
-| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
+| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
-|picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object |  — | {} |
+| 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
@ -53,7 +53,7 @@
        },
        value1: '',
        value2: '',
-        value3: new Date(),
+        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value4: '',
        value5: '',
        value6: '',
@ -233,22 +233,24 @@
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | - | false |
 | editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
 | placeholder | 占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
-| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
+| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
-| picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object |  — | {} |
+| 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
@ -147,6 +147,27 @@
 ```
 :::

+### 菜单隐藏方式
+
+可以`hide-on-click`属性来配置。
+
+:::demo 下拉菜单默认在点击菜单项后会被隐藏，将`hide-on-click`属性默认为`false`可以关闭此功能。
+```html
+<el-dropdown :hide-on-click="false">
+  <span class="el-dropdown-link">
+    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
+    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+

 ### Dropdown Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
@ -156,6 +177,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/form.md
+++ b/examples/docs/zh-CN/form.md
@ -530,7 +530,7 @@
      </el-form-item>
    </el-col>
  </el-form-item>
-  <el-form-item label="即时配送">
+  <el-form-item label="即时配送" prop="delivery">
    <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
@ -756,7 +756,7 @@
    },
    methods: {
      handleSubmit3(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+        this.$refs.dynamicForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
--- a/examples/docs/zh-CN/i18n.md
+++ b/examples/docs/zh-CN/i18n.md
@ -38,13 +38,13 @@ Vue.component(Button.name, Button)
 Vue.component(Select.name, Select)
 ```

-如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 IgnorePlugin 忽略掉它以减少打包后的文件体积。
+如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。

 **webpack.config.js**
 ```javascript
 {
  plugins: [
-    new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/)
+    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
  ]
 }
 ```
@ -63,6 +63,14 @@ Vue.component(Select.name, Select)
  <li>意大利语（it）</li>
  <li>韩语（ko）</li>
  <li>日语（ja）</li>
+  <li>荷兰语（nl）</li>
+  <li>越南语（vi）</li>
+  <li>俄语（ru-RU）</li>
+  <li>土耳其语（tr-TR）</li>
+  <li>巴西葡萄牙语（pt-br）</li>
+  <li>波斯语（fa）</li>
+  <li>泰语（th）</li>
+  <li>印尼语（id）</li>
 </ul>

 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
--- a/examples/docs/zh-CN/input-number.md
+++ b/examples/docs/zh-CN/input-number.md
@ -101,6 +101,7 @@
 | step     | 计数器步长           | number   | — | 1 |
 | size     | 计数器尺寸           | string   | large, small | — |
 | disabled | 是否禁用计数器        | boolean | — | false |
+| controls | 是否使用控制按钮        | boolean | — | true |

 ### Events
 | 事件名称 | 说明 | 回调参数 |
--- 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
--- a/examples/docs/zh-CN/loading.md
+++ b/examples/docs/zh-CN/loading.md
@ -204,12 +204,20 @@ Loading.service(options);
 let loadingInstance = Loading.service(options);
 loadingInstance.close();
 ```
+需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
+```javascript
+let loadingInstance1 = Loading.service({ fullscreen: true });
+let loadingInstance2 = Loading.service({ fullscreen: true });
+console.log(loadingInstance1 === loadingInstance2); // true
+```
+此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。
+
 如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。

 ### 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,9 @@ import { MessageBox } from 'element-ui';
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | MessageBox 标题 | string | — | — |
 | message | MessageBox 消息正文内容 | string | — | — |
-| type | 消息类型，用于显示图标 | string | success/info/<br>warning/error | — |
+| type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
+| customClass | MessageBox 的自定义类名 | string | — | — |
+| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action)，action 的值为'confirm'或'cancel' | — | — |
 | lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
 | showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |
 | showConfirmButton | 是否显示确定按钮 | boolean | — | true |
--- 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
@ -46,6 +46,14 @@
        });
      },
      
+      open7() {
+        this.$notify.success({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          offset: 100
+        });
+      },
+
      onClose() {
        console.log('Notification 已关闭');
      }
@ -166,6 +174,36 @@
 ```
 :::

+### 带有偏移
+
+让 Notification 偏移一些位置
+
+::: demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
+```html
+<template>
+  <el-button
+    plain
+    @click="open7">
+    偏移的消息
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify.success({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          offset: 100
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 全局方法

 Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
@ -186,8 +224,11 @@ 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 |

 ### 方法
 调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
--- a/examples/docs/zh-CN/pagination.md
+++ b/examples/docs/zh-CN/pagination.md
@ -109,7 +109,7 @@
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
-        currentPage4: 5
+        currentPage4: 4
      };
    }
  }
@ -133,7 +133,7 @@
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
-        currentPage4: 5
+        currentPage4: 4
      };
    },
    mounted() {
@ -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/popover.md
+++ b/examples/docs/zh-CN/popover.md
@ -251,3 +251,9 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 |--- | ---|
 | — | Popover 内嵌 HTML 文本 |
 | reference | 触发 Popover 显示的 HTML 元素 |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| show | 显示时触发 | — |
+| hide | 隐藏时触发 | — |
--- a/examples/docs/zh-CN/radio.md
+++ b/examples/docs/zh-CN/radio.md
@ -127,6 +127,8 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | Radio 按钮组尺寸   | string  | large, small  |    —     |
+| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
+| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |

 ### Radio-group Events
 | 事件名称 | 说明 | 回调参数 |
@ -138,5 +140,3 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | Radio 的 value  | string,number  |        —       |     —    |
 | disabled  | 是否禁用    | boolean   | — | false   |
-| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
-| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |
--- 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
@ -62,6 +62,16 @@
          }]
        }],
        options4: [],
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
        cities: [{
          value: 'Beijing',
          label: '北京'
@ -87,9 +97,10 @@
        value4: '',
        value5: [],
        value6: '',
-        value7: [],
+        value7: '',
        value8: '',
-        value9: [],
+        value9: '',
+        value10: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
      };
@ -129,7 +140,6 @@
 ### 基础用法

 适用广泛的基础单选
-
 :::demo `v-model`的值为当前被选中的`el-option`的 value 属性值
 ```html
 <template>
@ -499,7 +509,6 @@
 ### 远程搜索

 从服务器搜索数据，输入关键字进行查找
-
 :::demo 为了启用远程搜索，需要将`filterable`和`remote`设置为`true`，同时传入一个`remote-method`。`remote-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果`el-option`是通过`v-for`指令渲染出来的，此时需要为`el-option`添加`key`属性，且其值需具有唯一性，比如此例中的`item.value`。
 ```html
 <template>
@ -573,24 +582,73 @@
 ```
 :::

+### 创建条目
+可以创建并选中选项中不存在的条目
+:::demo 使用`allow-create`属性即可通过在输入框中输入文字来创建新的条目。注意此时`filterable`必须为真。
+```html
+<template>
+  <el-select
+    v-model="value10"
+    multiple
+    filterable
+    allow-create
+    placeholder="请选择文章标签">
+    <el-option
+      v-for="item in options5"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
+        value10: []
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Select Attributes 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | multiple | 是否多选 | boolean | — | false |
 | disabled | 是否禁用 | boolean | — | false |
+| size | 输入框尺寸 | string | large/small/mini | — |
 | clearable | 单选时是否可以清空选项 | boolean | — | false |
+| multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
 | name | select input 的 name 属性 | string | — | — |
 | placeholder | 占位符 | string | — | 请选择 |
 | filterable | 是否可搜索 | boolean | — | false |
+| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
 | filter-method | 自定义过滤方法 | function | — | — |
 | 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,6 +218,10 @@
  .el-table .positive-row {
    background: #e2f0e4;
  }
+
+  .demo-table .name-wrapper {
+    display: inline-block;
+  }
 </style>

 ## Table 表格
@ -689,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>
+```
+:::
+
 ### 多级表头

 数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
@ -880,7 +1065,7 @@
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
-      width="50">
+      width="55">
    </el-table-column>
    <el-table-column
      inline-template
@ -1116,7 +1301,7 @@
      <el-popover trigger="hover" placement="top">
        <p>姓名: {{ row.name }}</p>
        <p>住址: {{ row.address }}</p>
-        <div slot="reference">
+        <div slot="reference" class="name-wrapper">
          <el-tag>{{ row.name }}</el-tag>
        </div>
      </el-popover>
@ -1192,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
 | 事件名 | 说明 | 参数 |
@ -1202,9 +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
@ -1217,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,4 +137,6 @@
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
+| 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
@ -137,7 +137,7 @@
  export default {
    data() {
      return {
-        value1: '14:30',
+        value1: '',
        value2: new Date(2016, 9, 10, 18, 40),
        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        startTime: '',
@ -153,11 +153,13 @@
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | - | false |
 | editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
 | placeholder | 占位内容 | string | — | — |
 | format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
-| value | 绑定值 | TimePicker: Date<br>TimeSelect: String | - | - |
+| value | 绑定值 | TimePicker: DateTimeSelect: String | - | - |
 | align | 对齐方式 | string | left, center, right | left |
-| picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object | — | {} |
+| popper-class | TimePicker 下拉框的类名 | string | — | — |
+| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |

 ### Time Select Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@ -170,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,13 +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` |
+| 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
@ -56,7 +56,7 @@
  :on-remove="handleRemove"
  :default-file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
-  <div class="el-upload__tip" slot="tip" @click="changeFiles">只能上传jpg/png文件，且不超过500kb</div>
+  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>
 <script>
  export default {
@ -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/changelog.tpl
+++ b/examples/pages/template/changelog.tpl
@ -64,6 +64,7 @@
        font-size: 14px;
        list-style: none;
        padding-left: 0;
+        word-break: break-all;

        &:before {
          content: '';
--- 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.2",
+  "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,10 +111,11 @@
    "transliteration": "^1.1.11",
    "uppercamelcase": "^1.1.0",
    "url-loader": "^0.5.7",
-    "vue": "^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/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@ -10,7 +10,7 @@
      @focus="handleFocus"
      @keydown.up.native="highlight(highlightedIndex - 1)"
      @keydown.down.native="highlight(highlightedIndex + 1)"
-      @keydown.enter.native="select(highlightedIndex)"
+      @keydown.enter.stop.native="select(highlightedIndex)"
    >
      <template slot="prepend" v-if="$slots.prepend">
        <slot name="prepend"></slot>
@ -19,7 +19,7 @@
        <slot name="append"></slot>
      </template> 
    </el-input>
-    <transition name="md-fade-bottom">
+    <transition name="el-zoom-in-top">
      <ul
        v-if="suggestionVisible"
        class="el-autocomplete__suggestions"
--- 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-group.vue
+++ b/packages/checkbox/src/checkbox-group.vue
@ -16,12 +16,7 @@
      value(value) {
        this.$emit('change', value);
        this.dispatch('ElFormItem', 'el.form.change', [value]);
-        this.broadcast('ElCheckbox', 'initData', [value]);
      }
-    },
-
-    mounted() {
-      this.broadcast('ElCheckbox', 'initData', [this.value]);
    }
  };
 </script>
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@ -49,17 +49,28 @@

    componentName: 'ElCheckbox',

+    data() {
+      return {
+        selfModel: false,
+        focus: 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;
          }
        }
      },
@ -72,6 +83,23 @@
        } else if (this.model !== null && this.model !== undefined) {
          return this.model === this.trueLabel;
        }
+      },
+
+      isGroup() {
+        let parent = this.$parent;
+        while (parent) {
+          if (parent.$options.componentName !== 'ElCheckboxGroup') {
+            parent = parent.$parent;
+          } else {
+            this._checkboxGroup = parent;
+            return true;
+          }
+        }
+        return false;
+      },
+
+      store() {
+        return this._checkboxGroup ? this._checkboxGroup.value : this.value;
      }
    },

@ -86,17 +114,13 @@
      falseLabel: [String, Number]
    },

-    data() {
-      return {
-        store: [],
-        isGroup: false
-      };
-    },
-
    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;
        }
@ -105,11 +129,6 @@

    created() {
      this.checked && this.addToStore();
-      this.$on('initData', data => {
-        this.store = data;
-        this.isGroup = true;
-        this.checked && this.addToStore();
-      });
    }
  };
 </script>
--- 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');
        }

@ -366,8 +366,6 @@

        const newDate = new Date(this.year, this.month, 1);

-        const clickNormalCell = className.indexOf('prev') === -1 && className.indexOf('next') === -1;
-
        if (className.indexOf('prev') !== -1) {
          if (month === 0) {
            year = year - 1;
@ -390,7 +388,7 @@

        newDate.setDate(parseInt(text, 10));

-        if (clickNormalCell && this.selectionMode === 'range') {
+        if (this.selectionMode === 'range') {
          if (this.minDate && this.maxDate) {
            const minDate = new Date(newDate.getTime());
            const maxDate = null;
@ -419,9 +417,7 @@
            this.rangeState.selecting = true;
            this.markRange(this.minDate);
          }
-        }
-
-        if (selectionMode === 'day') {
+        } else if (selectionMode === 'day') {
          this.$emit('pick', newDate);
        } else if (selectionMode === 'week') {
          var weekNumber = getWeekNumber(newDate);
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="el-time-spinner">
+  <div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
    <div
      @mouseenter="emitSelectRange('hours')"
      @mousewheel="handleScroll('hour')"
@ -136,12 +136,10 @@
      },

      handleScroll(type) {
-        window.setTimeout(() => {
        const ajust = {};

        ajust[`${type}s`] = Math.min(Math.floor((this.$refs[type].scrollTop - 80) / 32 + 3), 59);
        this.$emit('change', ajust);
-        }, 0);
      },

      ajustScrollTop() {
--- a/packages/date-picker/src/basic/year-table.vue
+++ b/packages/date-picker/src/basic/year-table.vue
@ -67,17 +67,17 @@
        date.setFullYear(year);
        style.disabled = typeof this.disabledDate === 'function' &&
          this.disabledDate(date);
-        style.current = this.year === year;
+        style.current = Number(this.year) === year;

        return style;
      },

      nextTenYear() {
-        this.$emit('pick', this.year + 10, false);
+        this.$emit('pick', Number(this.year) + 10, false);
      },

      prevTenYear() {
-        this.$emit('pick', this.year - 10, false);
+        this.$emit('pick', Number(this.year) - 10, false);
      },

      handleYearTableClick(event) {
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@ -1,13 +1,13 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
    <div
      v-show="visible"
      :style="{ width: width + 'px' }"
      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">
@ -21,20 +21,23 @@
          <div class="el-date-range-picker__time-header" v-if="showTime">
            <span class="el-date-range-picker__editors-wrap">
              <span class="el-date-range-picker__time-picker-wrap">
-                <input
+                <el-input
+                  size="small"
+                  ref="minInput"
                  :placeholder="t('el.datepicker.startDate')"
                  class="el-date-range-picker__editor"
                  :value="minVisibleDate"
-                  @input="handleDateInput($event, 'min')"
-                  @change="handleDateChange($event, 'min')"/>
+                  @input.native="handleDateInput($event, 'min')"
+                  @change.native="handleDateChange($event, 'min')" />
              </span>
              <span class="el-date-range-picker__time-picker-wrap">
-                <input
+                <el-input
+                  size="small"
                  :placeholder="t('el.datepicker.startTime')"
                  class="el-date-range-picker__editor"
                  :value="minVisibleTime"
                  @focus="minTimePickerVisible = !minTimePickerVisible"
-                  @change="handleTimeChange($event, 'min')"/>
+                  @change.native="handleTimeChange($event, 'min')" />
                <time-picker
                  :picker-width="minPickerWidth"
                  ref="minTimePicker"
@ -47,24 +50,25 @@
            <span class="el-icon-arrow-right"></span>
            <span class="el-date-range-picker__editors-wrap is-right">
              <span class="el-date-range-picker__time-picker-wrap">
-                <input
-                  ref="minInput"
+                <el-input
+                  size="small"
                  :placeholder="t('el.datepicker.endDate')"
                  class="el-date-range-picker__editor"
                  :value="maxVisibleDate"
                  :readonly="!minDate"
-                  @input="handleDateInput($event, 'max')"
-                  @change="handleDateChange($event, 'max')" />
+                  @input.native="handleDateInput($event, 'max')"
+                  @change.native="handleDateChange($event, 'max')" />
              </span>
              <span class="el-date-range-picker__time-picker-wrap">
-                <input
+                <el-input
+                  size="small"
                  ref="maxInput"
                  :placeholder="t('el.datepicker.endTime')"
                  class="el-date-range-picker__editor"
                  :value="maxVisibleTime"
                  @focus="minDate && (maxTimePickerVisible = !maxTimePickerVisible)"
                  :readonly="!minDate"
-                  @change="handleTimeChange($event, 'max')" />
+                  @change.native="handleTimeChange($event, 'max')" />
                <time-picker
                  :picker-width="maxPickerWidth"
                  ref="maxTimePicker"
@ -132,7 +136,7 @@
        <button
          type="button"
          class="el-picker-panel__btn"
-          @click="handleConfirm"
+          @click="handleConfirm()"
          :disabled="btnDisabled">{{ t('el.datepicker.confirm') }}</button>
      </div>
    </div>
@ -142,6 +146,9 @@
 <script type="text/babel">
  import { nextMonth, prevMonth, toDate, formatDate, parseDate } from '../util';
  import Locale from 'element-ui/src/mixins/locale';
+  import TimePicker from './time';
+  import DateTable from '../basic/date-table';
+  import ElInput from 'element-ui/packages/input';

  export default {
    mixins: [Locale],
@ -176,19 +183,19 @@
      },

      minVisibleDate() {
-        return formatDate(this.minDate);
+        return this.minDate ? formatDate(this.minDate) : '';
      },

      maxVisibleDate() {
-        return formatDate(this.maxDate || this.minDate);
+        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate) : '';
      },

      minVisibleTime() {
-        return formatDate(this.minDate, 'HH:mm:ss');
+        return this.minDate ? formatDate(this.minDate, 'HH:mm:ss') : '';
      },

      maxVisibleTime() {
-        return formatDate(this.maxDate, 'HH:mm:ss');
+        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, 'HH:mm:ss') : '';
      },

      rightDate() {
@ -208,6 +215,7 @@

    data() {
      return {
+        popperClass: '',
        minPickerWidth: 0,
        maxPickerWidth: 0,
        date: new Date(),
@ -234,8 +242,8 @@
      showTime(val) {
        if (!val) return;
        this.$nextTick(_ => {
-          const minInputElm = this.$refs.minInput;
-          const maxInputElm = this.$refs.maxInput;
+          const minInputElm = this.$refs.minInput.$el;
+          const maxInputElm = this.$refs.maxInput.$el;
          if (minInputElm) {
            this.minPickerWidth = minInputElm.getBoundingClientRect().width + 10;
          }
@ -275,6 +283,8 @@
        } else if (Array.isArray(newVal)) {
          this.minDate = newVal[0] ? toDate(newVal[0]) : null;
          this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
+          if (this.minDate) this.date = new Date(this.minDate);
+          this.handleConfirm(true);
        }
      }
    },
@ -446,8 +456,8 @@
        this.resetDate();
      },

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

      resetDate() {
@ -455,9 +465,6 @@
      }
    },

-    components: {
-      TimePicker: require('./time'),
-      DateTable: require('../basic/date-table')
-    }
+    components: { TimePicker, DateTable, ElInput }
  };
 </script>
--- a/Show More
+++ b/Show More