[release] 1.0.8

[build] 1.0.8
update changelog
2025-12-16 11:44:01 +08:00 · 2016-12-20 19:01:14 +08:00 · 2016-12-20 19:01:14 +08:00 · 2016-12-20 18:56:49 +08:00 · 2016-12-20 18:54:50 +08:00 · 2016-12-20 18:54:50 +08:00
237 changed files with 11381 additions and 1044 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,65 @@
 ## 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*
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,61 @@
 ## 更新日志

+### 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*

--- 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/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
@@ -38,8 +38,11 @@ if [ "$TRAVIS_TAG" ]; then
  cd temp_web
  git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
  # build sub folder
-  export SUB_FOLDER=$(echo $TRAVIS_TAG | grep -o -E '\d+\.\d+')
+  echo $TRAVIS_TAG
+  export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
+  echo $SUB_FOLDER

+  SUB_FOLDER='1.0'
  mkdir $SUB_FOLDER
  rm -rf *.js *.css *.map static
  rm -rf $SUB_FOLDER/**
--- a/element_logo.svg
+++ b/element_logo.svg
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -160,13 +160,13 @@

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

          setTimeout(_ => {
-            document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop;
+            document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop + 120;
          }, 50);
        }
      }
--- a/examples/assets/styles/fonts/style.css
+++ b/examples/assets/styles/fonts/style.css
@@ -1,10 +1,10 @@
@font-face {
  font-family: 'icomoon';
-  src:  url('assets/styles/fonts/icomoon.eot?h6xgdm');
-  src:  url('assets/styles/fonts/icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
-    url('assets/styles/fonts/icomoon.ttf?h6xgdm') format('truetype'),
-    url('assets/styles/fonts/icomoon.woff?h6xgdm') format('woff'),
-    url('assets/styles/fonts/icomoon.svg?h6xgdm#icomoon') format('svg');
+  src:  url('icomoon.eot?h6xgdm');
+  src:  url('icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
+    url('icomoon.ttf?h6xgdm') format('truetype'),
+    url('icomoon.woff?h6xgdm') format('woff'),
+    url('icomoon.svg?h6xgdm#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
 }
--- a/examples/docs/en-US/button.md
+++ b/examples/docs/en-US/button.md
@@ -142,8 +142,9 @@ Besides default size, Button component provides three additional sizes for you t
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | button size   | string  |   large/small/mini            |    —     |
 | type     | button type   | string    |   primary/success/warning/danger/info/text |     —    |
-| plain     | determine whether it's a plain button   | Boolean    | true,false | false   |
-| disabled  | disable the button    | boolean   | true, false   | false   |
+| plain     | determine whether it's a plain button   | Boolean    | — | false   |
+| loading   | determine whether it's loading   | Boolean    | — | false   |
+| disabled  | disable the button    | boolean   | —   | false   |
 | icon  | button icon, accepts an icon name of Element icon component | string   |  —  |  —  |
 | autofocus  | same as native button's `autofocus` | boolean   |  —  |  false  |
 | native-type | same as native button's `type` | string | button/submit/reset | button |
--- a/examples/docs/en-US/custom-theme.md
+++ b/examples/docs/en-US/custom-theme.md
@@ -20,7 +20,7 @@ npm i https://github.com/ElementUI/theme-default -D
 After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will.

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

 > ✔ Generator variables file
 ```
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -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 |
+| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
+| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
+| popper-class | custom class name for DatePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |

 ### Picker Options
@@ -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 |
+| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
+| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
+| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |

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

 ### Dropdown Events
 | Event Name | Description | Parameters |
--- a/examples/docs/en-US/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/installation.md
+++ b/examples/docs/en-US/installation.md
@@ -4,7 +4,7 @@
 Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).

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

 ### CDN
--- a/examples/docs/en-US/menu.md
+++ b/examples/docs/en-US/menu.md
@@ -77,6 +77,10 @@ Vertical NavMenu with sub-menus.
        <el-menu-item-group title="Group Two">
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item four</template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-submenu>
      </el-submenu>
      <el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
      <el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
@@ -94,6 +98,10 @@ Vertical NavMenu with sub-menus.
        <el-menu-item-group title="Group Two">
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item four</template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">Navigator Two</el-menu-item>
      <el-menu-item index="3">Navigator Three</el-menu-item>
@@ -109,16 +117,6 @@ Vertical NavMenu with sub-menus.
      <el-menu-item-group title="Group Two">
        <el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
        <el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
-          <!-- <el-submenu index="5">
-            <template slot="title">Navigator Five</template>
-            <el-menu-item-group title="Group One">
-              <el-menu-item index="5-1">item one</el-menu-item>
-              <el-menu-item index="5-2">item two</el-menu-item>
-            </el-menu-item-group>
-            <el-menu-item-group title="Group Two">
-              <el-menu-item index="5-3">item three</el-menu-item>
-            </el-menu-item-group>
-          </el-submenu> -->
      </el-menu-item-group>
    </el-menu>
  </el-col>
--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -244,7 +244,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
@@ -222,6 +222,8 @@ In this case you should call `Notification(options)`. We have also registered me
 | title | title | string | — | — |
 | message | description text | string | — | — |
 | type | notification type | string | success/warning/info/error | — |
+| iconClass | custom icon's class. It will be overridden by `type` | string | — | — |
+| customClass | custom class name for Notification | string | — | — |
 | duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
 | onClose | callback function when closed | function | — | — |
 | offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |
--- a/examples/docs/en-US/pagination.md
+++ b/examples/docs/en-US/pagination.md
@@ -156,7 +156,7 @@ Add more modules based on your scenario.
 | total | total item count | number | — | — |
 | page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
 | current-page | current page number | number | — | 1 |
-| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
+| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | options of item count per page | number[] | — |  [10, 20, 30, 40, 50, 100] |

 ### Events
@@ -164,3 +164,8 @@ Add more modules based on your scenario.
 |---------|--------|---------|
 | size-change | triggers when `page-size` changes | the new `page-size` |
 | current-change | triggers when `current-page` changes | the new `current-page` |
+
+### Slot
+| Name | Description |
+| --- | --- |
+| — | custom content. To use this, you need to declare `slot` in `layout` |
--- a/examples/docs/en-US/rate.md
+++ b/examples/docs/en-US/rate.md
@@ -141,7 +141,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
 | colors | color array for icons. It should have 3 elements, each of which corresponds with a score level  | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
 | void-color | color of unselected icons | string | — | #C6D1DE |
 | disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
-| icon-classes |  array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
+| icon-classes |  array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
 | disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
 | show-text | whether to display texts | boolean | — | false |
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -626,6 +626,7 @@ Create and select new items that are not included in select options
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | multiple | whether multiple-select is activated | boolean | — | false |
 | disabled | whether Select is disabled | boolean | — | false |
+| size | size of Input | string | large/small/mini | — |
 | clearable | whether single select can be cleared | boolean | — | false |
 | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
 | name | the name attribute of select input | string | — | — |
@@ -636,11 +637,16 @@ Create and select new items that are not included in select options
 | remote | whether options are loaded from server | boolean | — | false |
 | remote-method | custom remote search method | function | — | — |
 | loading | whether Select is loading data from server | boolean | — | false |
+| loading-text | displayed text while loading data from server | string | — | Loading |
+| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
+| no-data-text | displayed text when there is no options | string | — | No data |
+| popper-class | custom class name for Select's dropdown | string | — | — |

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

 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
--- a/examples/docs/en-US/steps.md
+++ b/examples/docs/en-US/steps.md
@@ -126,7 +126,7 @@ Vertical step bars.
 |---------- |-------- |---------- |-------------  |-------- |
 | title | step title | string | — | — |
 | description | step description | string | — | — |
-| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use <br> custom icons | string | — |
+| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons | string | — |

 ### Step Slot
 | Name | Description |
--- a/examples/docs/en-US/switch.md
+++ b/examples/docs/en-US/switch.md
@@ -12,7 +12,7 @@

 ## Switch

-Switch is used for switching between two opposing states. 
+Switch is used for switching between two opposing states.

 ### Basic usage

@@ -45,7 +45,7 @@ Switch is used for switching between two opposing states.

 ### Disabled

-:::demo Adding the `disabled` attribute disables Switch. 
+:::demo Adding the `disabled` attribute disables Switch.

 ```html
 <el-switch
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -104,6 +104,56 @@
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }],
+        tableData4: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }],
        currentRow: null,
        multipleSelection: []
      };
@@ -144,6 +194,10 @@
          return 'positive-row';
        }
        return '';
+      },
+
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
      }
    },

@@ -155,7 +209,7 @@
  };
 </script>

-## Table 
+## Table

 Display multiple data with similar format. You can sort, filter, compare your data in a table.

@@ -471,7 +525,7 @@ When there are too many rows, you can use a fixed header.
 ```
 :::

-### Table with fixed column 
+### Table with fixed column

 When there are too many columns, you can fix some of them.

@@ -576,7 +630,7 @@ When there are too many columns, you can fix some of them.
 ```
 :::

-### Table with fixed columns and header 
+### Table with fixed columns and header

 When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.

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

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

 When the data structure is complex, you can use group header to show the data hierarchy.
@@ -875,7 +1056,7 @@ You can also select multiple rows.
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
-      width="50">
+      width="55">
    </el-table-column>
    <el-table-column
      inline-template
@@ -1086,7 +1267,7 @@ Filter the table to find desired data.
 :::

 ### Custom column template
- 
+
 Customize table column so it can be integrated with other components.
 :::demo Activate custom column template by adding the `inline-template` attribute. By default, the context of `el-table-column` is the one where `el-table` lies, and you can customize it with the `context` attribute, e.g. `:context="_self"` refers to the current context. This is useful when sometimes Table is encapsulated into another component, and `table-column` is distributed by slots. In `el-column`, you have access to the following data: row, column, $index and store (state management of Table).
 ```html
@@ -1177,7 +1358,8 @@ Customize table column so it can be integrated with other components.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | table data | array | — | — |
-| height | Table's height. By default it has an auto height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
+| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
+| maxHeight | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
 | stripe | whether table is striped | boolean | — | false |
 | border | whether table has vertical border | boolean | — | false |
 | fit | whether width of column automatically fits its container | boolean | — | true |
@@ -1187,6 +1369,7 @@ Customize table column so it can be integrated with other components.
 | row-style | function that returns custom style for a row,  or a string assigning custom style for every row | Function(row, index)/Object | — | — |
 | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
 | context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | - | current context where Table lies |
+| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | | - | No Data |

 ### Table Events
 | Event Name | Description | Parameters |
@@ -1197,10 +1380,12 @@ Customize table column so it can be integrated with other components.
 | cell-mouse-enter | triggers when hovering into a cell| row, column, cell, event |
 | cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event |
 | cell-click | triggers when clicking a cell | row, column, cell, event |
-| row-click | triggers when clicking a row | row, event |
+| row-click | triggers when clicking a row | row, event, column |
+| row-contextmenu | triggers when user right clicks on a row | row, event |
 | row-dblclick | triggers when double clicking a row | row, event |
 | header-click | triggers when clicking a column header | column, event |
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |
+| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |

 ### Table Methods
@@ -1214,6 +1399,7 @@ Customize table column so it can be integrated with other components.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1)  | string | selection/index | — |
 | label | column label | string | — | — |
+| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | - | - |
 | prop |  field name. You can also use its alias: `property` | string | — | — |
 | width | column width | string | — | — |
 | min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — |
--- a/examples/docs/en-US/tabs.md
+++ b/examples/docs/en-US/tabs.md
@@ -142,5 +142,6 @@ Border card tabs.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
-| label-content | render function for tab title | Function(h) | - | - |
+| label-content | render function for tab title | Function(h, tab:vueInstance) | - | - |
+| disabled | whether Tab is disabled | boolean | - | false |
 | name      | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |
--- a/examples/docs/en-US/tag.md
+++ b/examples/docs/en-US/tag.md
@@ -34,7 +34,7 @@ Used for marking and selection.

 ### Basic usage

-::: demo Use the `type` attribute to define Tag's type.
+::: demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.

 ```html
 <el-tag>Tag One</el-tag>
@@ -93,6 +93,7 @@ Used for marking and selection.
 | closable | whether Tab can be removed | boolean | — | false |
 | close-transition | whether the removal animation is disabled | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
+| color | background color of the tag | string | — | — |


 ### Events
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -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,16 +245,16 @@ Used for node selection. In the following example, data for each layer is acquir
 | Method      | Description    | Parameters     |
 |---------- |-------- |---------- |
 | filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
-| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
+| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
 | setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked |
-| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `true`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
-| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `true`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
+| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
+| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 | setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |

 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| node-click | triggers when a node is clicked | three parameters: <br>node object corresponding to the node clicked, <br>`node` property of TreeNode, <br>TreeNode itself |
-| check-change | triggers when the selected state of the node changes | three parameters: <br>node object corresponding to the node whose selected state is changed, <br>whether the node is selected, <br>whether node's subtree has selected nodes |
-
+| node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
+| check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes |
+| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |

--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -161,6 +161,7 @@ on-preview | hook function when clicking the uploaded files | function(file) |
 on-remove | hook function when files are removed | function(file, fileList) | — | —
 on-success | hook function when uploaded successfully | function(response, file, fileList) | — | —
 on-error | hook function when some errors occurs | function(err, response, file) | — | —
+on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |
 before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` or a `Promise` is returned, uploading will be aborted | function(file) | — | —
 thumbnail-mode | whether thumbnail is displayed | boolean | — | false
 default-file-list | default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
--- a/examples/docs/zh-CN/button.md
+++ b/examples/docs/zh-CN/button.md
@@ -189,8 +189,9 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | 尺寸   | string  |   large,small,mini            |    —     |
 | type     | 类型   | string    |   primary,success,warning,danger,info,text |     —    |
-| plain     | 是否朴素按钮   | Boolean    | true,false | false   |
-| disabled  | 禁用    | boolean   | true, false   | false   |
+| plain     | 是否朴素按钮   | Boolean    | — | false   |
+| loading     | 是否加载中状态   | Boolean    | — | false   |
+| disabled  | 是否禁用状态    | boolean   | —   | false   |
 | icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
 | autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |
 | native-type | 原生 type 属性 | string | button,submit,reset | button |
--- a/examples/docs/zh-CN/custom-theme.md
+++ b/examples/docs/zh-CN/custom-theme.md
@@ -20,7 +20,7 @@ npm i https://github.com/ElementUI/theme-default -D
 主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。

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

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

 ### Dropdown Events
 | 事件名称      | 说明    | 回调参数      |
--- a/examples/docs/zh-CN/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/installation.md
+++ b/examples/docs/zh-CN/installation.md
@@ -4,7 +4,7 @@
 推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。

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

 ### CDN
@@ -50,4 +50,4 @@ npm i element-ui -D
  </script>
 </html>
 ```
-如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
+如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
--- a/examples/docs/zh-CN/loading.md
+++ b/examples/docs/zh-CN/loading.md
@@ -217,7 +217,7 @@ console.log(loadingInstance1 === loadingInstance2); // true
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；<br>若传入字符串，则会将其作为参数传入 `document.querySelector`<br>以获取到对应 DOM 节点 | object/string | — | document.body |
+| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body |
 | body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false |
 | fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
 | lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |
--- a/examples/docs/zh-CN/menu.md
+++ b/examples/docs/zh-CN/menu.md
@@ -108,6 +108,10 @@
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项1</el-menu-item>
+        </el-submenu>
      </el-submenu>
      <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
      <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
@@ -125,6 +129,10 @@
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项1</el-menu-item>
+        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">导航二</el-menu-item>
      <el-menu-item index="3">导航三</el-menu-item>
@@ -140,16 +148,6 @@
      <el-menu-item-group title="分组二">
        <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
        <el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
-        <!-- <el-submenu index="5">
-          <template slot="title">导航五</template>
-          <el-menu-item-group title="分组一">
-            <el-menu-item index="5-1">选项1</el-menu-item>
-            <el-menu-item index="5-2">选项2</el-menu-item>
-          </el-menu-item-group>
-          <el-menu-item-group title="分组二">
-            <el-menu-item index="5-3">选项3</el-menu-item>
-          </el-menu-item-group>
-        </el-submenu> -->
      </el-menu-item-group>
    </el-menu>
  </el-col>
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -241,7 +241,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
@@ -224,6 +224,8 @@ import { Notification } from 'element-ui';
 | title | 标题 | string | — | — |
 | message | 说明文字 | string | — | — |
 | type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
+| iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — |
+| customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
 | onClose | 关闭时的回调函数 | function | — | — |
 | offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |
--- a/examples/docs/zh-CN/pagination.md
+++ b/examples/docs/zh-CN/pagination.md
@@ -206,7 +206,7 @@
 | total | 总条目数 | Number | — | - |
 | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | - |
 | current-page | 当前页数 | Number | — | 1 |
-| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
+| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |

 ### Events
@@ -214,3 +214,8 @@
 |---------|--------|---------|
 | size-change | pageSize 改变时会触发 | 每页条数`size` |
 | current-change | currentPage 改变时会触发 | 当前页`currentPage` |
+
+### Slot
+| name | 说明 |
+|------|--------|
+| — | 自定义内容，需要在 `layout` 中列出 `slot` |
--- a/examples/docs/zh-CN/rate.md
+++ b/examples/docs/zh-CN/rate.md
@@ -151,12 +151,12 @@
 | max | 最大分值 | number | — | 5 |
 | disabled | 是否为只读 | boolean | — | false |
 | allow-half | 是否允许半选 | boolean | — | false |
-| low-threshold | 低分和中等分数的界限值，值本身<br>被划分在低分中 | number | — | 2 |
-| high-threshold | 高分和中等分数的界限值，值本身<br>被划分在高分中 | number | — | 4 |
-| colors | icon 的颜色数组，共有 3 个元素，<br>为 3 个分段所对应的颜色 | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 |
+| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 |
+| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
 | void-color | 未选中 icon 的颜色 | string | — | #C6D1DE |
 | disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 |
-| icon-classes | icon 的类名数组，共有 3 个元素，<br>为 3 个分段所对应的类名 | array | — | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
+| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |
 | disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |
 | show-text | 是否显示辅助文字 | boolean | — | false |
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -628,6 +628,7 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | multiple | 是否多选 | boolean | — | false |
 | disabled | 是否禁用 | boolean | — | false |
+| size | 输入框尺寸 | string | large/small/mini | — |
 | clearable | 单选时是否可以清空选项 | boolean | — | false |
 | multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
 | name | select input 的 name 属性 | string | — | — |
@@ -638,11 +639,16 @@
 | remote | 是否为远程搜索 | boolean | — | false |
 | remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
+| loading-text | 远程加载时显示的文字 | string | — | 加载中 |
+| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
+| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
+| popper-class | Select 下拉框的类名 | string | — | — |

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

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

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

-## Events
+### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change | 值改变时触发 | 改变后的值 |
--- a/examples/docs/zh-CN/steps.md
+++ b/examples/docs/zh-CN/steps.md
@@ -120,7 +120,7 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | title | 标题 | string | — | — |
 | description | 描述性文字 | string | — | — |
-| icon | 图标 | Element Icon 提供的图标，如果要使用<br>自定义图标可以通过 slot 方式写入 | string | — |
+| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — |

 ### Step Slot
 | name | 说明  |
--- a/examples/docs/zh-CN/switch.md
+++ b/examples/docs/zh-CN/switch.md
@@ -85,8 +85,8 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | width  | switch 的宽度（像素）    | number   | — | 58（有文字）/ 46（无文字） |
-| on-icon-class  | switch 打开时所显示图标的类名，<br>设置此项会忽略 `on-text`    | string   | — | — |
-| off-icon-class  | switch 关闭时所显示图标的类名，<br>设置此项会忽略 `off-text`    | string   | — | — |
+| on-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `on-text`    | string   | — | — |
+| off-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text`    | string   | — | — |
 | on-text  | switch 打开时的文字    | string   | — | ON |
 | off-text  | switch 关闭时的文字    | string   | — | OFF |
 | on-color  | switch 打开时的背景色    | string   | — | #20A0FF |
--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -104,6 +104,56 @@
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
+        tableData4: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }],
        currentRow: null,
        multipleSelection: []
      };
@@ -145,6 +195,10 @@
          return 'positive-row';
        }
        return '';
+      },
+
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
      }
    },

@@ -164,7 +218,7 @@
  .el-table .positive-row {
    background: #e2f0e4;
  }
-  
+
  .demo-table .name-wrapper {
    display: inline-block;
  }
@@ -693,6 +747,133 @@
 ```
 :::

+### 流体高度
+
+当数据量动态变化时，可以为 Table 设置一个最大高度。
+
+:::demo 通过设置`max-height`属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
+```html
+<template>
+  <el-table
+    :data="tableData4"
+    border
+    style="width: 100%"
+    max-height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="日期"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="province"
+      label="省份"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="市区"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="邮编"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      inline-template
+      :context="_self"
+      fixed="right"
+      label="操作"
+      width="120">
+      <span>
+        <el-button
+          @click.native.prevent="deleteRow($index, tableData4)"
+          type="text"
+          size="small">
+          移除
+        </el-button>
+      </span>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
+      }
+    },
+    data() {
+      return {
+        tableData4: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 多级表头

 数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
@@ -884,7 +1065,7 @@
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
-      width="50">
+      width="55">
    </el-table-column>
    <el-table-column
      inline-template
@@ -1196,6 +1377,7 @@
 | row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
 | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — |
 | context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root`。优先读取 column 的 context 属性。 | Object | - | Table 所处上下文 |
+| empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | | - | 暂无数据 |

 ### Table Events
 | 事件名 | 说明 | 参数 |
@@ -1206,10 +1388,12 @@
 | cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
 | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
 | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
-| row-click | 当某一行被点击时会触发该事件 | row, event |
+| row-click | 当某一行被点击时会触发该事件 | row, event, column |
+| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event |
 | row-dblclick | 当某一行被双击时会触发该事件 | row, event |
 | header-click | 当某一列的表头被点击时会触发该事件 | column, event |
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
+| filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |

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

 ### 基础用法

-:::demo 由`type`属性来定义，该属性可选填。
+:::demo 由`type`属性来选择tag的类型，也可以通过`color`属性来自定义背景色。

 ```html
 <el-tag>标签一</el-tag>
@@ -93,6 +93,7 @@
 | closable | 是否可关闭 | boolean | — | false |
 | close-transition | 是否禁用关闭时的渐变动画 | boolean | — | false |
 | hit | 是否有边框描边 | boolean | — | false |
+| color | 背景色 | string | — | — |


 ### Events
--- a/examples/docs/zh-CN/time-picker.md
+++ b/examples/docs/zh-CN/time-picker.md
@@ -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,14 +257,15 @@
 | 方法名 | 说明 | 参数 |
 |------|--------|------|
 | filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
-| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），<br>则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则<br>仅返回被选中的叶子节点，默认值为 `false` |
+| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点，默认值为 `false` |
 | setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
-| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），<br>则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `true` |
-| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，<br>若为 `true` 则仅设置叶子节点的选中状态，默认值为 `true` |
-| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 <br> 3. boolean 类型，是否设置子节点 ，默认为 false |
+| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `true` |
+| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `true` |
+| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false |

 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | node-click  | 节点被点击时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
-| check-change  | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、<br>节点本身是否被选中、节点的子树中是否有被选中的节点 |
+| check-change  | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
+| current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 |
--- a/examples/docs/zh-CN/upload.md
+++ b/examples/docs/zh-CN/upload.md
@@ -156,7 +156,7 @@
 ```
 :::

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

-### Upload Methods
+### Methods
 | 方法名      | 说明          | 参数 |
 |---------- |-------------- | - |
 | clearFiles | 清空已上传的文件列表 | — |
--- a/examples/pages/template/component.tpl
+++ b/examples/pages/template/component.tpl
@@ -26,10 +26,12 @@
            text-align: left;
            border-top: 1px solid #eaeefb;
            background-color: #EFF2F7;
+            white-space: nowrap;
          }
          td, th {
            border-bottom: 1px solid #eaeefb;
            padding: 10px;
+            max-width: 250px;
          }
          th:first-child, td:first-child {
            padding-left: 10px;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-ui",
-  "version": "1.0.4",
+  "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
@@ -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.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -49,17 +49,27 @@

    componentName: 'ElCheckbox',

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

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

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

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

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


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

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

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

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

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

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

@@ -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 = {};
+        const ajust = {};

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

      ajustScrollTop() {
--- 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],
@@ -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/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -1,15 +1,15 @@
 <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-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">
@@ -22,20 +22,20 @@
        <div class="el-picker-panel__body">
          <div class="el-date-picker__time-header" v-if="showTime">
            <span class="el-date-picker__editor-wrap">
-              <input
-                :placehoder="t('el.datepicker.selectDate')"
-                type="text"
-                v-model.lazy="visibleDate"
-                class="el-date-picker__editor">
+              <el-input
+                :placeholder="t('el.datepicker.selectDate')"
+                :value="visibleDate"
+                size="small"
+                @change.native="visibleDate = $event.target.value" />
            </span>
            <span class="el-date-picker__editor-wrap">
-              <input
+              <el-input
                ref="input"
                @focus="timePickerVisible = !timePickerVisible"
-                v-model.lazy="visibleTime"
-                :placehoder="t('el.datepicker.selectTime')"
-                type="text"
-                class="el-date-picker__editor">
+                :placeholder="t('el.datepicker.selectTime')"
+                :value="visibleTime"
+                size="small"
+                @change.native="visibleTime = $event.target.value" />
              <time-picker
                ref="timepicker"
                :date="date"
@@ -128,6 +128,11 @@
 <script type="text/babel">
  import { formatDate, parseDate } from '../util';
  import Locale from 'element-ui/src/mixins/locale';
+  import ElInput from 'element-ui/packages/input';
+  import TimePicker from './time';
+  import YearTable from '../basic/year-table';
+  import MonthTable from '../basic/month-table';
+  import DateTable from '../basic/date-table';

  export default {
    mixins: [Locale],
@@ -137,7 +142,7 @@
        /* istanbul ignore if */
        if (!val) return;
        this.$nextTick(_ => {
-          const inputElm = this.$refs.input;
+          const inputElm = this.$refs.input.$el;
          if (inputElm) {
            this.pickerWidth = inputElm.getBoundingClientRect().width + 10;
          }
@@ -145,6 +150,7 @@
      },

      value(newVal) {
+        if (!newVal) return;
        newVal = new Date(newVal);
        if (!isNaN(newVal)) {
          if (typeof this.disabledDate === 'function' &&
@@ -345,10 +351,7 @@
    },

    components: {
-      TimePicker: require('./time'),
-      YearTable: require('../basic/year-table'),
-      MonthTable: require('../basic/month-table'),
-      DateTable: require('../basic/date-table')
+      TimePicker, YearTable, MonthTable, DateTable, ElInput
    },

    mounted() {
@@ -364,6 +367,7 @@

    data() {
      return {
+        popperClass: '',
        pickerWidth: 0,
        date: new Date(),
        value: '',
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -1,13 +1,19 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition
+    name="el-zoom-in-top"
+    @before-enter="panelCreated"
+    @after-leave="$emit('dodestroy')">
    <div
      v-show="visible"
      :style="{ width: width + 'px' }"
-      class="el-time-range-picker el-picker-panel">
+      class="el-time-range-picker el-picker-panel"
+      :class="popperClass">
      <div class="el-time-range-picker__content">
        <div class="el-time-range-picker__cell">
          <div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
-          <div class="el-time-range-picker__body el-time-panel__content">
+          <div
+            :class="{ 'has-seconds': showSeconds }"
+            class="el-time-range-picker__body el-time-panel__content">
            <time-spinner
              ref="minSpinner"
              :show-seconds="showSeconds"
@@ -21,7 +27,9 @@
        </div>
        <div class="el-time-range-picker__cell">
          <div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div>
-          <div class="el-time-range-picker__body el-time-panel__content">
+          <div
+            :class="{ 'has-seconds': showSeconds }"
+            class="el-time-range-picker__body el-time-panel__content">
            <time-spinner
              ref="maxSpinner"
              :show-seconds="showSeconds"
@@ -52,6 +60,7 @@
 <script type="text/babel">
  import { parseDate, limitRange } from '../util';
  import Locale from 'element-ui/src/mixins/locale';
+  import TimeSpinner from '../basic/time-spinner';

  const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss');
  const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss');
@@ -75,9 +84,7 @@
  export default {
    mixins: [Locale],

-    components: {
-      TimeSpinner: require('../basic/time-spinner')
-    },
+    components: { TimeSpinner },

    computed: {
      showSeconds() {
@@ -87,30 +94,11 @@

    props: ['value'],

-    watch: {
-      value(val) {
-        const time = clacTime(val);
-        if (time.minTime === this.minTime && time.maxTime === this.maxTime) {
-          return;
-        }
-
-        this.handleMinChange({
-          hours: time.minTime.getHours(),
-          minutes: time.minTime.getMinutes(),
-          seconds: time.minTime.getSeconds()
-        });
-        this.handleMaxChange({
-          hours: time.maxTime.getHours(),
-          minutes: time.maxTime.getMinutes(),
-          seconds: time.maxTime.getSeconds()
-        });
-      }
-    },
-
    data() {
      const time = clacTime(this.$options.defaultValue);

      return {
+        popperClass: '',
        minTime: time.minTime,
        maxTime: time.maxTime,
        btnDisabled: isDisabled(time.minTime, time.maxTime),
@@ -126,7 +114,32 @@
      };
    },

+    watch: {
+      value(newVal) {
+        this.panelCreated();
+        this.$nextTick(_ => this.ajustScrollTop());
+      }
+    },
+
    methods: {
+      panelCreated() {
+        const time = clacTime(this.value);
+        if (time.minTime === this.minTime && time.maxTime === this.maxTime) {
+          return;
+        }
+
+        this.handleMinChange({
+          hours: time.minTime.getHours(),
+          minutes: time.minTime.getMinutes(),
+          seconds: time.minTime.getSeconds()
+        });
+        this.handleMaxChange({
+          hours: time.maxTime.getHours(),
+          minutes: time.maxTime.getMinutes(),
+          seconds: time.maxTime.getSeconds()
+        });
+      },
+
      handleClear() {
        this.handleCancel();
      },
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -1,9 +1,10 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
    <div
      v-show="visible"
      :style="{ width: width + 'px' }"
-      class="el-picker-panel time-select">
+      class="el-picker-panel time-select"
+      :class="popperClass">
      <div class="el-picker-panel__content">
        <div class="time-select-item"
          v-for="item in items"
@@ -90,6 +91,7 @@

    data() {
      return {
+        popperClass: '',
        start: '09:00',
        end: '18:00',
        step: '00:30',
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -1,10 +1,11 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
    <div
      v-show="currentVisible"
      :style="{width: width + 'px'}"
-      class="el-time-panel">
-      <div class="el-time-panel__content">
+      class="el-time-panel"
+      :class="popperClass">
+      <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
        <time-spinner
          ref="spinner"
          @change="handleChange"
@@ -72,6 +73,7 @@
          minutes: date.getMinutes(),
          seconds: date.getSeconds()
        });
+        this.$nextTick(_ => this.ajustScrollTop());
      },

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

    data() {
      return {
+        popperClass: '',
        format: 'HH:mm:ss',
        value: '',
        hours: 0,
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -1,35 +1,26 @@
 <template>
-  <span
+  <el-input
    class="el-date-editor"
+    :readonly="!editable || readonly"
+    :disabled="disabled"
+    :size="size"
    v-clickoutside="handleClose"
-    :class="{
-      'is-have-trigger': haveTrigger,
-      'is-active': pickerVisible,
-      'is-filled': !!this.internalValue
-    }">
-
-    <input
-      class="el-date-editor__editor"
-      :class="{ 'is-disabled': disabled }"
-      :readonly="!editable || readonly"
-      :disabled="disabled"
-      type="text"
-      :placeholder="placeholder"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @keydown="handleKeydown"
-      ref="reference"
-      v-model.lazy="visualValue" />
-
-    <span
-      @click.stop="handleClickIcon"
-      class="el-date-editor__trigger el-icon"
+    :placeholder="placeholder"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @keydown.native="handleKeydown"
+    :value="visualValue"
+    @change.native="visualValue = $event.target.value"
+    ref="reference">
+    <i slot="icon"
+      class="el-input__icon"
+      @click="handleClickIcon"
      :class="[showClose ? 'el-icon-close' : triggerClass]"
      @mouseenter="handleMouseEnterIcon"
      @mouseleave="showClose = false"
      v-if="haveTrigger">
-    </span>
-  </span>
+    </i>
+  </el-input>
 </template>

 <script>
@@ -38,6 +29,7 @@ import Clickoutside from 'element-ui/src/utils/clickoutside';
 import { formatDate, parseDate, getWeekNumber } from './util';
 import Popper from 'element-ui/src/utils/vue-popper';
 import Emitter from 'element-ui/src/mixins/emitter';
+import ElInput from 'element-ui/packages/input';

 const NewPopper = {
  props: {
@@ -77,10 +69,6 @@ const DATE_FORMATTER = function(value, format) {
  return formatDate(value, format);
 };
 const DATE_PARSER = function(text, format) {
-  text = text.split(':');
-  if (text.length > 1) text = text.map(item => item.slice(-2));
-  text = text.join(':');
-
  return parseDate(text, format);
 };
 const RANGE_FORMATTER = function(value, format) {
@@ -97,8 +85,9 @@ const RANGE_FORMATTER = function(value, format) {
 const RANGE_PARSER = function(text, format) {
  const array = text.split(RANGE_SEPARATOR);
  if (array.length === 2) {
-    const range1 = array[0].split(':').map(item => item.slice(-2)).join(':');
-    const range2 = array[1].split(':').map(item => item.slice(-2)).join(':');
+    const range1 = array[0];
+    const range2 = array[1];
+
    return [parseDate(range1, format), parseDate(range2, format)];
  }
  return [];
@@ -193,10 +182,12 @@ export default {
  mixins: [Emitter, NewPopper],

  props: {
+    size: String,
    format: String,
    readonly: Boolean,
    placeholder: String,
    disabled: Boolean,
+    popperClass: String,
    editable: {
      type: Boolean,
      default: true
@@ -210,6 +201,8 @@ export default {
    pickerOptions: {}
  },

+  components: { ElInput },
+
  directives: { Clickoutside },

  data() {
@@ -229,7 +222,6 @@ export default {
      if (!val && this.picker && typeof this.picker.handleClear === 'function') {
        this.picker.handleClear();
      }
-      this.dispatch('ElFormItem', 'el.form.change');
    },
    value: {
      immediate: true,
@@ -240,10 +232,19 @@ export default {
  },

  computed: {
+    reference() {
+      return this.$refs.reference.$el;
+    },
+
+    refInput() {
+      if (this.reference) return this.reference.querySelector('input');
+      return {};
+    },
+
    valueIsEmpty() {
      const val = this.internalValue;
      if (Array.isArray(val)) {
-        for (let i = 0, j = val.length; i < j; i++) {
+        for (let i = 0, len = val.length; i < len; i++) {
          if (val[i]) {
            return false;
          }
@@ -282,6 +283,7 @@ export default {
    visualValue: {
      get() {
        const value = this.internalValue;
+        if (!value) return;
        const formatter = (
          TYPE_VALUE_RESOLVER_MAP[this.type] ||
          TYPE_VALUE_RESOLVER_MAP['default']
@@ -300,7 +302,7 @@ export default {
          ).parser;
          const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);

-          if (parsedValue) {
+          if (parsedValue && this.picker) {
            this.picker.value = parsedValue;
          }
          return;
@@ -357,42 +359,10 @@ export default {

    handleKeydown(event) {
      const keyCode = event.keyCode;
-      const target = event.target;
-      let selectionStart = target.selectionStart;
-      let selectionEnd = target.selectionEnd;
-      let length = target.value.length;

      // tab
      if (keyCode === 9) {
        this.pickerVisible = false;
-      // enter
-      } else if (keyCode === 13) {
-        this.pickerVisible = this.picker.visible = false;
-        this.visualValue = target.value;
-        target.blur();
-      // left
-      } else if (keyCode === 37) {
-        event.preventDefault();
-
-        if (selectionEnd === length && selectionStart === length) {
-          target.selectionStart = length - 2;
-        } else if (selectionStart >= 3) {
-          target.selectionStart -= 3;
-        } else {
-          target.selectionStart = 0;
-        }
-        target.selectionEnd = target.selectionStart + 2;
-      // right
-      } else if (keyCode === 39) {
-        event.preventDefault();
-        if (selectionEnd === 0 && selectionStart === 0) {
-          target.selectionEnd = 2;
-        } else if (selectionEnd <= length - 3) {
-          target.selectionEnd += 3;
-        } else {
-          target.selectionEnd = length;
-        }
-        target.selectionStart = target.selectionEnd - 2;
      }
    },

@@ -408,8 +378,9 @@ export default {
      if (!this.picker) {
        this.panel.defaultValue = this.internalValue;
        this.picker = new Vue(this.panel).$mount(document.createElement('div'));
+        this.picker.popperClass = this.popperClass;
        this.popperElm = this.picker.$el;
-        this.picker.width = this.$refs.reference.getBoundingClientRect().width;
+        this.picker.width = this.reference.getBoundingClientRect().width;
        this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
        this.picker.selectionMode = this.selectionMode;
        if (this.format) {
@@ -453,10 +424,8 @@ export default {
        });

        this.picker.$on('select-range', (start, end) => {
-          setTimeout(() => {
-            this.$refs.reference.setSelectionRange(start, end);
-            this.$refs.reference.focus();
-          }, 0);
+          this.refInput.setSelectionRange(start, end);
+          this.refInput.focus();
        });
      } else {
        this.pickerVisible = this.picker.visible = true;
@@ -466,10 +435,10 @@ export default {

      if (this.internalValue instanceof Date) {
        this.picker.date = new Date(this.internalValue.getTime());
-        this.picker.resetView && this.picker.resetView();
      } else {
        this.picker.value = this.internalValue;
      }
+      this.picker.resetView && this.picker.resetView();

      this.$nextTick(() => {
        this.picker.ajustScrollTop && this.picker.ajustScrollTop();
--- a/packages/dialog/README.md
+++ b/packages/dialog/README.md
@@ -1,18 +1,18 @@
-# el-dialog
-> A el-dialog component for Vue.js.
+# element-dialog
+> A element-dialog component for Vue.js.

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

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

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

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

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

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

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

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

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

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

 cooking.set({
  entry: {
-    index: path.join(__dirname, 'index.js')
+    index: path.join(__dirname, '_index.js')
  },
  dist: path.join(__dirname, 'lib'),
  template: false,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Leopoldthecoder	51fab8641f	[release] 1.0.8	2016-12-20 19:01:14 +08:00
Leopoldthecoder	3d3bd7dc09	[build] 1.0.8	2016-12-20 19:01:14 +08:00
Leopoldthecoder	64667a4e8e	update changelog	2016-12-20 18:56:49 +08:00
baiyaaaaa	c69e30e8c1	fix popover test	2016-12-20 18:54:50 +08:00
baiyaaaaa	d2f852a320	add dropdown hide-on-click prop	2016-12-20 18:54:50 +08:00
Leopoldthecoder	98d3905ce9	Changelog: update for 1.0.8	2016-12-20 18:38:49 +08:00
Furybean	a0187d1aba	Table: add filter change event & add column-key for column.	2016-12-20 18:37:31 +08:00
杨奕	f14628254a	add popper-class for DatePicker, Select and Tooltip (#1806 )	2016-12-20 16:38:47 +08:00
杨奕	b158e124da	update anchor (#1829 )	2016-12-20 16:38:21 +08:00
杨奕	5027e86d4f	update bootstrap (#1858 )	2016-12-20 15:26:54 +08:00
杨奕	208891d173	Dialog: fix z-index of non-modal dialogs (#1866 )	2016-12-20 15:26:28 +08:00
baiyaaaaa	076d4303f7	add param to label-content render function	2016-12-20 15:18:10 +08:00
Yuyang Liu	3a774939ef	fix #1827	2016-12-20 14:21:16 +08:00
baiyaaaaa	15e74b6e7d	fix checkbox isGroup bug in computed cached (#1860 )	2016-12-20 14:18:46 +08:00
baiyaaaaa	1db8dc6588	Revert "fix form validate callback params" (#1864 ) This reverts commit `87b13bf0e0`.	2016-12-20 14:17:53 +08:00
杨奕	3a14efeed0	update OpenCollective	2016-12-20 11:51:52 +08:00
JeOam	65aaee6353	fix typo in clickoutside.js (#1848 )	2016-12-20 11:34:16 +08:00
杨奕	ead186153f	Pagination: fix slot (#1846 )	2016-12-20 11:20:57 +08:00
baiyaaaaa	4fa158eb32	add suport for mutil level submenu	2016-12-20 11:06:45 +08:00
baiyaaaaa	e7e104df5d	fix form validate callback params	2016-12-20 11:05:42 +08:00
杨奕	7e6128660c	Add OpenCollective badges	2016-12-20 10:34:10 +08:00
杨奕	1c24a2b294	Switch: update style (#1803 )	2016-12-20 09:18:52 +08:00
杨奕	240fda5af8	Select: add visible-change event (#1849 )	2016-12-20 09:11:10 +08:00
cinwell.li	8712d9f222	Doc: fix custom theme, fixed #1828 (#1837 )	2016-12-20 00:46:29 +08:00
qingwei.li	a915f8a5bb	DatePicker: fix set value, fixed #1773	2016-12-19 15:46:12 +08:00
FuryBean	40f9d83f87	Tree: add expand-on-click-node prop. (#1805 )	2016-12-19 15:38:51 +08:00
baiyaaaaa	1ba0745f00	fix input line-height (#1825 )	2016-12-19 11:16:47 +08:00
baiyaaaaa	4b20374bf1	support use checkbox without transport value	2016-12-19 10:14:48 +08:00
杨奕	217bb5c953	Loading: update spinner animation, fixed #1786 (#1817 )	2016-12-18 21:34:55 +08:00
杨奕	92742dc56a	Select: fix a dropdown update bug (#1784 )	2016-12-18 21:24:02 +08:00
杨奕	8123ee1c48	Slider: fix change event (#1810 )	2016-12-18 21:20:27 +08:00
Adam	71a3b5ad2f	Tag: Fix text wrap (#1785 ) When the width of parent container is too narrow, text in tag will be break into lines. 當父容器寬度不足時，Tag 文字會產生換行的現象	2016-12-18 21:19:03 +08:00
jingsam	2144c02bd3	Update installation.md	2016-12-18 19:48:58 +08:00
FuryBean	6c4f8a6867	Tree: add current-change event & current-node-key. (#1807 )	2016-12-17 14:09:05 +08:00
FuryBean	4614990cb4	Table: add column as third parameter for row-click event. (#1808 )	2016-12-17 14:00:35 +08:00
Rizqy H	12d43adeb3	Add Indonesian translation	2016-12-16 11:01:32 +08:00
baiyaaaaa	a5bdd2cabb	component README update and fix	2016-12-16 10:57:54 +08:00
baiyaaaaa	47c62e9fe0	add progress hook function property (#1782 )	2016-12-15 23:49:29 +08:00
cinwell.li	9f0774813f	Add yarn.lock (#1747 ) * Add yarn.lock * Update travis config * Use yarnpkg registry	2016-12-15 20:42:55 +08:00
cinwell.li	7d6f3606b4	DatePicker: fix datetimerange, fixed #1758 (#1766 )	2016-12-15 18:39:14 +08:00
cinwell.li	6d2f68b24c	Popup: prevent click event bubbles, fixed #1677 (#1754 )	2016-12-15 12:50:08 +08:00
baiyaaaaa	5e692418ff	fix the tab bar dynamic bug	2016-12-15 10:21:09 +08:00
Leopoldthecoder	0414842426	[release] 1.0.7	2016-12-14 15:36:21 +08:00
Leopoldthecoder	19210b6945	[build] 1.0.7	2016-12-14 15:36:21 +08:00
Leopoldthecoder	b5405f2c7a	Changelog: update for 1.0.7	2016-12-14 14:48:41 +08:00
杨奕	d7d8257516	Message & Notification: add iconClass and customClass, fixed #1664 (#1671 )	2016-12-14 13:43:14 +08:00
杨奕	6fa2a7049f	Table: update docs (#1740 )	2016-12-14 13:42:56 +08:00
qingwei.li	3bf624c757	Table: add empty slot, closed #1737 , closed #1730	2016-12-14 13:34:35 +08:00
zheng yu	0ee61e7296	fix: fixed losing focus when drag slider button fast or right click slider button. (#1723 )	2016-12-13 23:12:43 +08:00
baiyaaaaa	22b703739d	improve button docs (#1727 )	2016-12-13 23:10:41 +08:00
杨奕	eeee584d56	MessageBox: add customClass (#1707 )	2016-12-13 22:52:29 +08:00
cinwell.li	cad3d770ed	DatePicker: fix clear button, fixed #1690 (#1710 ) * DatePicker: fix clear button, fixed #1690 * DatePicker: fix reset button style * DatePicker: fix set value * DatePicker: fix test	2016-12-13 22:51:43 +08:00
杨奕	9c7786b203	Select: add size property (#1715 )	2016-12-13 22:42:01 +08:00
杨奕	07b796f8c5	Update README.md	2016-12-13 22:14:11 +08:00
Leopoldthecoder	0d6ef8255c	add logo	2016-12-13 22:00:20 +08:00
杨奕	c1c90217f5	Update README.md	2016-12-13 20:52:52 +08:00
杨奕	7f9b539122	Update README.md	2016-12-13 19:12:08 +08:00
baiyaaaaa	8917704392	support tag color property	2016-12-13 16:57:56 +08:00
Hashem Qolami	998dcce225	Feature table maxHeight (#1560 ) (#1674 ) * ✨ [Table] Added fluid height table with maxHeight prop (#1560) * 🚨 [Table] Added test for maxHeight prop (#1560) * 📚 [Table] Added the documentation of fluid-height table (#1560)	2016-12-13 16:21:59 +08:00
杨奕	b9f7e10f20	README: add donation (#1719 )	2016-12-13 15:56:42 +08:00
baiyaaaaa	36261b6534	support append prepend slot (#1709 )	2016-12-13 14:46:47 +08:00
cinwell.li	105db7c673	Upload: fix file list style (#1701 )	2016-12-13 14:34:22 +08:00
baiyaaaaa	a51eafb705	add old value for input-number change event	2016-12-13 11:46:40 +08:00
杨奕	1db2d64ddc	Tabs: fix empty tab-pane issue, fixed #1608 (#1672 )	2016-12-13 10:36:10 +08:00
杨奕	0ccd537cc8	Select: fix filterable group bug, fixed #1678 (#1679 )	2016-12-13 10:34:53 +08:00
Pierre-Louis Renaudin	15dc895ee6	Add contextmenu event on table row element. (#1663 )	2016-12-10 18:48:07 +08:00
Leopoldthecoder	e40ab359b4	[release] 1.0.6	2016-12-09 18:32:32 +08:00
Leopoldthecoder	65244c2678	[build] 1.0.6	2016-12-09 18:32:31 +08:00
qingwei.li	d835c7b4ec	TimePicker: fix HH:mm style	2016-12-09 18:20:42 +08:00
杨奕	c1a469c899	Changelog: update for 1.0.6 (#1657 )	2016-12-09 17:59:51 +08:00
qingwei.li	42ec4567f1	TimePicker: fix HH:mm style	2016-12-09 17:38:11 +08:00
Furybean	fed488ef9f	Table: fix column[type=selection] style issue in ie9+.	2016-12-09 17:37:58 +08:00
FuryBean	2dd2c79365	Table: fix a style bug when fixed=right. (#1651 )	2016-12-09 16:08:49 +08:00
杨奕	b0633de8bf	Upload: fix thumbnailed upload slow bug (#1644 )	2016-12-09 12:10:57 +08:00
杨奕	9ccb7b852f	Table: add missing ElCheckbox (#1635 )	2016-12-09 11:49:30 +08:00
qingwei.li	8fa9e2e57b	locale: fix tr-TR	2016-12-09 11:01:34 +08:00
qingwei.li	ea757e66fa	Add awesome-element link	2016-12-09 10:58:36 +08:00
qingwei.li	2b247df9ca	Upload: remove 'X-Requested-With' header Fix test	2016-12-09 10:58:29 +08:00
cinwell.li	55dfb0c296	Refactor/datepicker (#1623 ) * DatePicker: replace native input with el-input * DatePicker: support size prop, closes #1069, closes #1440 * DatePicker: show correct date for initial value, fixed #1129 * TimePicker: fix empty value when panel appears, fixed #1583 * DatePicker: trigger clickoutside when clicking icon, fixed #1604 * DatePicker: fix year type in year panel, fixed #1607 * DatePicker: fix test * DatePicker: add doc	2016-12-09 00:06:34 +08:00
XinYong Chen	c7cfcc36bc	Modify document error (#1629 )	2016-12-08 18:42:33 +08:00
Leopoldthecoder	af0d7288bd	Select: fix clearable still working bug in disabled mode	2016-12-08 18:42:19 +08:00
gogu	88a5772e91	Fixed switch custom color with disabled.	2016-12-08 18:22:24 +08:00
Aleksey Beskosty	ec3bb5d3fe	[DatePicker]: fix #1506 - allow any visible date to be selected in range picker	2016-12-08 17:49:03 +08:00
baiyaaaaa	3d12579652	support tab disabled	2016-12-08 17:13:41 +08:00
baiyaaaaa	658383ecae	fix docs	2016-12-08 17:09:56 +08:00
Kanin Peanviriyakulkit	783f28c946	Added Thai translation	2016-12-08 17:09:34 +08:00
baiyaaaaa	d4ded0e184	improve docs	2016-12-08 13:31:45 +08:00
baiyaaaaa	87f952745a	Merge pull request #1606 from Leopoldthecoder/dev Select: fix display issue of object-typed value in remote mode	2016-12-08 12:17:30 +08:00
Leopoldthecoder	3245232917	Select: fix display issue of object-typed value in remote mode	2016-12-07 18:16:21 +08:00
Hashem Qolami	5cde77b37d	🐛 [Table] fixed incompatibility with vue-i18n (#1587 )	2016-12-07 10:23:05 +08:00
Hashem Qolami	aea15ef5cf	✨ Added fa locale (#1584 )	2016-12-06 20:29:20 +08:00
Leopoldthecoder	95002f3d32	[release] 1.0.5	2016-12-06 18:47:04 +08:00
Leopoldthecoder	1ecb9d9e4e	[build] 1.0.5	2016-12-06 18:47:04 +08:00
baiyaaaaa	bf9690bbcc	Merge pull request #1579 from QingWei-Li/fix/deploy-script CI: fix and test deploy script	2016-12-06 18:44:50 +08:00
Leopoldthecoder	2b3e48f82f	Changelog: update for 1.0.5	2016-12-06 18:31:07 +08:00
baiyaaaaa	67a009b7a7	Merge pull request #1578 from QingWei-Li/fix/i18n-doc doc: IgnorePlugin => NormalModuleReplacementPlugin, fixed #1315	2016-12-06 18:27:27 +08:00
baiyaaaaa	e9dcd105b3	Merge pull request #1574 from Leopoldthecoder/dev add translation team members.	2016-12-06 18:24:57 +08:00
baiyaaaaa	8a245d6ba0	Merge pull request #1577 from QingWei-Li/timepicker/remove-flex TimeSelect: remove flexbox style, fixed #1335	2016-12-06 18:24:30 +08:00
qingwei.li	1a5a6a6f24	CI: fix and test deploy script	2016-12-06 17:40:47 +08:00
qingwei.li	fcf412087c	doc: IgnorePlugin => NormalModuleReplacementPlugin, fixed #1315	2016-12-06 17:19:47 +08:00
qingwei.li	929e7f2554	TimeSelect: remove flexbox style, fixed #1335	2016-12-06 17:16:09 +08:00
baiyaaaaa	8fe68e5385	Merge pull request #1559 from Leopoldthecoder/slider-click Slider: avoid clicking triggering right after dragend	2016-12-06 16:56:28 +08:00
Leopoldthecoder	1c750dcec7	Slider: avoid clicking triggering right after dragend	2016-12-06 16:55:42 +08:00
baiyaaaaa	5ef3a8597b	Merge pull request #1558 from Leopoldthecoder/select-fix Select: show dropdown when options are given in remote mode	2016-12-06 16:38:08 +08:00
Leopoldthecoder	9cd6f36f1f	add translation team members.	2016-12-06 16:05:38 +08:00
Jan Wirth	8a33e96eb0	Improve German locale (#1566 ) German native speaker here, did my best to improve the locale. Could not see the actual usage of some items like select.noMatch so I hope it still matches the use case.	2016-12-06 13:15:32 +08:00
Leopoldthecoder	f3116acbbe	Select: show dropdown when options are given in remote mode	2016-12-05 23:15:34 +08:00
杨奕	6e618b4c6d	Select: fix async bug/fix object-typed value init issue (#1540 )	2016-12-05 18:21:09 +08:00
Fábio Vedovelli	ea56806de7	Included pt-br locale (#1545 )	2016-12-05 18:19:33 +08:00
baiyaaaaa	3d19de3cd5	fix steps style bug in ie9	2016-12-04 15:20:15 +08:00
baiyaaaaa	78a460ac9e	make upload creat url for all file (#1530 )	2016-12-04 10:21:53 +08:00
baiyaaaaa	7a85d55f31	normalize transition class name	2016-12-03 19:30:21 +08:00
杨奕	06a739ff22	Select: fix remote filter not showing dropdown issue (#1535 )	2016-12-03 18:09:20 +08:00
Allen Walker	f508fd703e	Col: fix a style bug about responsive layout	2016-12-03 14:01:15 +08:00