Merge branch 'dev'

.github/CONTRIBUTING.md

@@ -26,6 +26,8 @@ Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡
 
 - 提交 PR 前请 rebase，确保 commit 记录的整洁。
 
+- 确保 PR 是提交到 `dev` 分支，而不是 `master` 分支。
+
 - 如果是修复 bug，请在 PR 中给出描述信息。
 
 - 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。
@@ -56,7 +58,7 @@ npm run dist
 ```
 
 ## 组件开发规范
-- 通过 `npm run new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档
+- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档
 - 如果包含父子组件，需要更改目录结构，参考 `Button`
 - 组件内如果依赖了其他组件，需要在当前组件内引入，参考 `Select`
 

.github/ISSUE_TEMPLATE.md

@@ -1,16 +1,14 @@
 <!--
 提交 issue 前请务必查看 FAQ：https://github.com/ElemeFE/element/blob/master/FAQ.md。如果你的问题可以在 FAQ 中找到解决方案，我们会直接关闭 issue。
- -->
 
-<!--
 issue 仅用于提交 bug 或 feature 以及设计相关的内容，其它疑问请到 gitter 聊天室找社区里面的小伙伴聊一聊：https://gitter.im/ElemeFE/element
- -->
- 
-<!--
-Issues are exclusively for bug reports and feature requests. For other questions, please visit gitter: https://gitter.im/ElemeFE/element
+
+有问题请提供 Demo 或者 GitHub 仓库地址，节省大家时间
 -->
 
 <!--
+Issues are exclusively for bug reports and feature requests. For other questions, please visit gitter: https://gitter.im/ElemeFE/element
+
 Thank you for contributing! Please carefully read the following before opening your issue.
  -->
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +1,5 @@
 Please makes sure these boxes are checked before submitting your PR, thank you!
 
 * [ ] Make sure you follow Element's [Contributing Guide](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md).
-* [ ] Rebase before creating a PR to keep commit history clear.
+* [ ] Make sure you are merging your commits to `dev` branch.
 * [ ] Add some descriptions and refer relative issues for you PR.

.gitignore

@@ -12,4 +12,3 @@ examples/pages/zh-CN
 fe.element/element-ui
 .npmrc
 coverage
-yarn.lock

.travis.yml

@@ -1,23 +1,10 @@
+sudo: false
 language: node_js
-node_js: 5
-cache:
-  bundler: true
-  directories:
-  - node_modules
-  - travis_phantomjs
+node_js: stable
 before_install:
 - 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
 after_success:
 - sh build/deploy-ci.sh
 - cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls

CHANGELOG.en-US.md

@@ -1,5 +1,199 @@
 ## Changelog
 
+### 1.1.3
+
+*2017-01-09*
+
+- Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167
+- Fixed DatePicker year calculating error when choosing the next year, #2152
+- Added `default-sort-prop` and `default-sort-order` attributes for Table, #2182 (by @njleonzhang)
+- Fixed filterable Select filtering other options with initial value, #2196
+- Added custom i18n processing, making Element compatible with i18n plugins other than `vue-i18n`, #2129
+- Added `resize` attribute for Input, #2263 (by @Kingwl)
+- Fixed Autocomplete not hiding dropdown when blurred, #2247
+- Fixed style issues with nested Tabs, #2212 (by @Kingwl)
+- Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192
+
+### 1.1.2
+
+*2016-12-30*
+
+- Fixed `sortable` and `fixed` attribute of Table not working in Vue 2.1.7+
+- Fixed Input Number not resetting on blur when input with illegal values, #2098
+- Removed `title` scoped slot of Collapse, and added `title` named slot, #2100
+- Fixed range selection in TimePicker not working issue
+- Fixed Tabs' active tab switching when a non-active tab is removed, #2106
+- Fixed console error reporting when navigating Select with arrow keys, #2120
+- Fixed incorrect validation timing of filterable Select in Form, #2120
+
+### 1.1.1
+
+*2016-12-29*
+
+- Fixed compatibility issue with latest Vue due to compilation
+
+### 1.1.0 Helium
+
+*2016-12-29*
+
+New features:
+- Two brand new components: Carousel and Collapse
+- SSR supported
+- Scrollbars' style inside components is upgraded
+- Table now supports custom templates via [scoped slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots); the good old `inline-template` is still compatible, but it's no longer recommended and is likely to be removed in the future
+- Table now supports expandable rows
+- DatePicker now supports specifying the first day of week
+- TimeSelect now supports `maxTime`
+- Autocomplete now supports `popper-class`
+- To customize template of Tab-Pane, now you can use the `slot` named `label`
+
+Fixes:
+- `change` event of DatePicker incorrectly triggering multiple times, #2070
+- Width shaking of tab-pane while initializing, #1883
+
+Breaking changes:
+- Only compatible with Vue 2.1.6 and beyond
+- Parameters of Form validateField() methods are updated
+- Alert's render-content attribute is removed, and now you can pass your custom template via default slot
+- The box models of Input and Select are updated from `block` to `inline-block`
+- The box model of Tabs is updated from `inline-block` to `block`, and Tab-Pane's `label-content` attribute is removed
+- The dropdown of Autocomplete now inserts directly to `<body>`, not `<el-autocomplete>` any more
+
+### 1.0.9
+
+*2016-12-27*
+
+- Fixed DatePicker incorrectly triggering input event, #1834
+- Fixed Tree reporting `event is undefined` error in Firefox, #1945
+- Added `change` event for DatePicker, whose parameter is the formatted value, #1841
+- Added `header-align` attribute for Table, #1424
+- Fixed single select Table's highlight style not removing when data is removed, #1890
+- Fixed filterable Select lagging issue with more options, #1933
+- Fixed multiple disabled Select not disabling removing selected options issue, #2001
+- Fixed Col style not working in `xs`, #2011
+- Added `value` attribute for Tab, #2008
+- Fixed InputNumber `change` event incorrectly firing multiple times in some conditions, #1999
+- Added `clearable` attribute for DatePicker, #1994
+- Fixed Form always passing validation in async mode, #1936
+
+### 1.0.8
+
+*2016-12-20*
+
+- Fixed nested Popup from event bubbling, #1677
+- Fixed the issue that datetimerange-typed DatePicker can not select time, #1758
+- Fixed `change` event not firing correctly of Slider, #1809
+- Fixed Loading's spinner splitting while animating in some conditions, #1786
+- Added `loading-text`, `no-data-text`, `no-match-text` properties and `visible-change` event for Select, #1849
+- Added `popper-class` property for DatePicker, Select and Tooltip, #1806
+- Added `expand-on-click-node`, `current-node-key` properties and `current-change` event for Tree, #1805 #1807
+- Added the third parameter `column` for Table's `row-click` event, #1808
+- Fixed an error when pages with Checkbox switching routes due to `computed` property being cached, #1860
+- Added the tab instance as a parameter for TabPanel's `label-content` render function, #1857
+- Added infinite submenus support for NavMenu in vertical mode, #1851
+- Updated Checkbox so that it works without a binding value, #1818
+- Added `onProgress` hook for Progress, #1782
+- Fixed Tab not updating active bar with dynamic label, #1761
+- Added `filter-change` event for Table, and `column-key` property for TableColumn, #1876
+- Added `hide-on-click` property for Dropdown, #1879
+
+### 1.0.7
+
+*2016-12-14*
+
+- Fixed DatePicker dropdown appears when hovering on the clear button
+- Fixed DatePicker displays a wrong date when its initial value is null
+- Added `row-contextmenu` event and `max-height` attribute for Table, #1663 #1674
+- Added `customClass` attribute for MessageBox, #1707
+- Added `iconClass` and `customClass` attributes for Message and Notification, #1671
+- Added empty slot for Table, #1737
+- Added old value as a second parameter in change event for InputNumber
+
+### 1.0.6
+
+*2016-12-09*
+
+- Added `disabled` attribute for Tabs, #1620
+- Added `size` attribute for DatePicker input, #1440
+- Fixed `datetimerange` DatePicker's panel not showing correct date if initial value is present, #1129
+- Fixed DatePicker display error when switching year, #1607
+- Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604
+- Fixed TimePicker not refreshing value after clicking the clear button, #1583
+- Fixed remote filterable Select display error when its value is an object, #1593
+- Fixed Select's clear button still working bug when it's `disabled`, #1619
+- Fixed Switch's background color error when its `disabled` attribute is dynamically changed, #1627
+- Fixed some style bugs of Table
+
+### 1.0.5
+
+*2016-12-06*
+
+- Fixed Select with async options and binding value displaying value instead of label, #1537
+- Fixed Select reports an error when initial binding value is an empty object, #1533
+- Fixed remote filtering Select not showing dropdown in some conditions, #1531
+- Fixed Slider sometimes drifting a small distance after releasing dragging, #1546
+- Fixed Steps style in IE9, #1543
+- Added Upload generating URL for all file types, #1530
+- Fixed TimeSelect style, removed flexbox, #1335
+
+### 1.0.4
+
+*2016-12-02*
+
+- Added `controls` attribute for Input Number, #1473
+- Fixed Checkbox Group and Radio Group async issue, #1511 #1514
+- Added `offset` attribute for Notification, #1419
+- Fixed Slider's value not accurate issue when dragging rapidly, #1458
+- Fixed Slider incorrectly showing multiple decimal digits issue, #1450
+- Fixed Select's binding value and displayed value not in sync in some conditions
+- Added `multiple-limit` and `allow-create` attributes for Select
+- Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438
+- Fixed Tree's view not updating issue after fetching child nodes' data, #1439
+- Fixed some Table's style issues in windows system, #1464 #1507
+- Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451
+- Added `row-dblclick` event for Table, #1362
+
+### 1.0.3
+
+*2016-11-28*
+
+- Fixed `currentPage` of Pagination not working in some cases, #1336
+- Fixed `month` and `disabledDate` DatePicker's view not refreshing issue when switching year, #1158
+- Fixed `readonly` DatePicker clear button not disabled issue, #1238
+- Fixed Slider not working when binding value is `NaN` or `step` is smaller than 1, #1239 #1282
+- Added multi-header for Table, #1312
+- Added `rowStyle` for Table, #1348
+- Fixed some attributes of TableColumn can not dynamically assigned issue, #1314
+- Added `filter-node-method` attribute and `filter` method for Tree, #1257
+- Added `getCheckedKeys` and `setCheckedKeys` methods for Tree, #1254
+- Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152
+- Fixed Popper not triggering destroy issue when keep-alive, #1359
+- Added object deep validation for Form, #1363
+- Added `append` and `prepend` for Autocomplete, #1369
+- Added dynamic `pageSizes` support for Pagination, #1372
+- Added custom style API for checked buttons in Radio Button, #1380
+- Added assigning title via slot for Menu Group, #1382
+- Fixed DatePicker year switching bug, #1385
+- Added uploaded file list API for Upload, #1393
+- Added multi-type support for `label` attribute of Checkbox, #1400
+- Added `setChecked` method for Tree, #1422
+
+### 1.0.2
+
+*2016-11-18*
+
+- Added `context` for Table to specify which context to access inside of table columns, #1161
+- Added multiple languages
+- Fixed language's dynamic switching issue, #1160
+- Added `render-content` for Alert, #568
+- Added styles for focused Button, #982
+- Fixed `change` triggering timing in Switch, #1162
+- Fixed TimeSelect being disabled when start time is set to `00:00`, #676
+- Added `show-header` attribute and `header-click` method for Table, #1195
+- Improved `height` attribute for Table when set to a string, #1195
+- Fixed `selection-change` of Table not triggering in some cases, #1198
+- Fixed Table's fixed columns not disappear when `fixed` attribute is dynamically changed, #1182
+
 ### 1.0.1
 
 *2016-11-16*
@@ -23,7 +217,7 @@
 - Fixed DiatePicker not refresh year when switched in month picker, #1070
 - Added $loading service
 - Added `manual` trigger in Popover
-- Added props: `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
+- Added props: `nodeKey`, `emptyText`, `checkStrictly`, `defaultExpandAll`, `autoExpandParent`, `defaultCheckedKeys`, `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
 
 ### 1.0.0
 

CHANGELOG.zh-CN.md

@@ -1,5 +1,187 @@
 ## 更新日志
 
+### 1.1.3
+*2017-01-09*
+
+- 修复 DatePicker 页面加载后首次清空不会触发 `change` 事件，#2167
+- 修复 DatePicker 选择下一年时，年份计算错误，#2152
+- 新增 Table 的 `default-sort-prop` 和 `default-sort-order` 属性，#2182（by @njleonzhang）
+- 修复有默认值的可搜索 Select 其他数据被过滤的问题，#2196
+- 新增自定义 i18n 处理方法，方便和除了 `vue-i18n` 之外的插件使用，#2129
+- 新增 Input `resize` 属性，#2263（by @Kingwl）
+- 修复 Autocomplete 在 blur 事件触发时没有隐藏下拉列表的问题，#2247
+- 修复 Tabs 嵌套使用时的样式问题，#2212（by @Kingwl）
+- 修复 Tabs 默认激活非第一项时 tabBar 的显示位置不正确的问题，#2192
+
+### 1.1.2
+*2016-12-30*
+
+- 修复 Vue 2.1.7 升级导致的 Table `sortable` 和 `fixed` 无法使用的问题
+- 修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098
+- 移除 Collapse 的 `title` scoped slot, 并新增 `title` named slot，#2100
+- 修复 TimePicker 范围选择无法使用的问题
+- 修复 Tabs 删除非当前激活的 tab 后，当前激活的 tab 变化的问题，#2106
+- 修复 Select 在使用方向键导航时控制台报错的问题，#2120
+- 修复 Form 中可搜索的 Select 验证时机错误的问题，#2120
+
+### 1.1.1
+*2016-12-29*
+
+- 修复由于编译而出现的不兼容新版 Vue 的问题
+
+### 1.1.0 Helium
+*2016-12-29*
+
+新特性：
+- 新增 Carousel、Collapse 组件
+- 支持 SSR
+- 组件内的滚动条样式优化
+- Table 支持通过 [Scoped Slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots) 传入模板；原来的 `inline-template` 仍然兼容，但是不再推荐使用，未来可能会被移除
+- Table 支持展开行功能(Expandable rows)
+- DatePicker 支持指定周起始日(first day of week)
+- TimeSelect 支持设置 `maxTime`
+- Autocomplete 新增 `popper-class`属性
+- Tab-Pane 新增 name 为 label 的具名 `slot`，用于实现自定义标签内容
+
+修复：
+- DatePicker 的 `change` 事件错误地触发多次的问题，#2070
+- Tabs 组件内 tab-pane 初始化时宽度抖动的问题，#1883
+
+非兼容性更新：
+- 最低兼容 Vue 2.1.6
+- Form validateField() 方法回调的参数更新
+- Alert 取消了 render-content 属性，现在自定义模板需要通过默认 slot 传入
+- Input 和 Select 盒模型从 `block` 修改为 `inline-block`
+- Tabs 盒模型从 `inline-block` 修改为 `block`，Tab-Pane 移除 `label-content` 属性
+- Autocomplete 下拉列表现在直接插入到 `<body>` 标签下，而不是 `<el-autocomplete>` 下
+
+### 1.0.9
+*2016-12-27*
+
+- 修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834
+- 修复 Tree 在 Firefox 下会提示 event is undefined 的问题，#1945
+- 新增 DatePicker 的 `change` 事件，返回和输入框一致的格式化后的值，#1841
+- 新增 Table 的 `header-align` 属性，#1424
+- 修复单选的 Table 在数据移除时，高亮状态仍然存在的问题，#1890
+- 修复可搜索的 Select 在选项较多时的卡顿问题，#1933
+- 修复多选的 Select 在禁用状态下仍然能够手动删除选中项的问题，#2001
+- 修复 Col `xs` 分辨率下样式无效的问题，#2011
+- 新增 Tab 组件的 `value` 属性并支持 `v-model` 用法，#2008
+- 修复 Input Number 在某些条件下 change 事件被触发多次的问题，#1999
+- 新增 DatePicker 的 `clearable` 属性，#1994
+- 修复 Form 异步验证时某些条件下总是验证通过的问题，#1936
+
+### 1.0.8
+*2016-12-20*
+
+- 修复 Popup 在叠加使用时阻止事件冒泡，#1677
+- 修复 DatePicker 类型为 datetimerange 时无法选择时间的问题，#1758
+- 修复 Slider 的 `change` 事件不能正确触发的问题，#1809
+- 修复 Loading 的 spinner 在某些情况下转动时出现碎片的问题，#1786
+- 新增 Select 的 `loading-text`、`no-data-text`、`no-match-text` 属性和 `visible-change` 事件，#1849
+- 新增 DatePicker、Select 和 Tooltip 的 `popper-class` 属性，#1806
+- 新增 Tree 的 `expand-on-click-node`、`current-node-key` 属性和 `current-change` 事件，#1805 #1807
+- 新增 Table `row-click` 事件的第三个参数 `column`，#1808
+- 修复 Checkbox 的在路由切换时因为 computed 属性被缓存导致的bug，#1860
+- 新增 TabPanel `label-content` 渲染钩子方法中增加 tab 实例的参数，#1857
+- 新增 NavMenu 组件增加无限级子菜单（vertical模式）的支持，#1851
+- 新增 Checkbox 现在支持不绑定 value 也可以正常使用，#1818
+- 新增 Progress 的 `onProgress` 钩子函数，#1782
+- 修复 Tab 组件 active bar 在动态 label 下没有更新的问题，#1761
+- 新增 Table 的 `filter-change` 事件和 TableColumn 的 `column-key` 属性，#1876
+- 新增 Dropdown `hide-on-click` 属性，#1879
+
+### 1.0.7
+*2016-12-14*
+
+- 修复 DatePicker 在有值的情况下 hover 清空按钮时会错误地显示弹框
+- 修复 DatePicker 设置默认值为 null 会错误地显示时间值
+- 新增 Table 的 `row-contextmenu` 事件和 `max-height` 属性，#1663 #1674
+- 新增 MessageBox 的 `customClass` 属性，#1707
+- 新增 Message 和 Notification 的 `iconClass` 和 `customClass` 属性，#1671
+- 新增 Table 支持 empty slot，#1737
+- 改进 InputNumber change 事件增加 old value 的参数
+
+### 1.0.6
+*2016-12-09*
+
+- 新增 Tabs 组件的 `disabled` 属性，#1620
+- 新增 DatePicker 的 input 支持 `size`，#1440
+- 修复 DatePicker 为 `datetimerange` 类型并设置初始值时，面板未显示正确日期的问题，#1129
+- 修复 DatePicker 切换年份时显示异常的问题，#1607
+- 修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604
+- 修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583
+- 修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593
+- 修复 Select 为 `disabled` 时，`clearable` 仍然可以工作的问题，#1619
+- 修复 自定义背景颜色的 Switch 在动态切换 `disabled` 时，背景颜色错误的问题，#1627
+- 修复 Table 的一些样式问题
+
+### 1.0.5
+*2016-12-06*
+
+- 修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537
+- 修复 Select 的初始值为一个空对象时会报错的问题，#1533
+- 修复 Select 远程搜索有时不显示下拉框的问题，#1531
+- 修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546
+- 修复 IE9 下 Steps 的样式问题，#1543
+- 新增 Upload 对所有文件类型生成 URL 的功能，#1530
+- 修复 TimeSelect 的样式，移除 flexbox, #1335
+
+### 1.0.4
+*2016-12-02*
+
+- 新增 Input Number 的 `controls` 属性，#1473
+- 修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514
+- 增加 Notification 的 `offset` 属性，#1419
+- 修复 Slider 在快速拖动时取值不准确的问题，#1458
+- 修复 Slider 在某些情况下绑定值为多位小数的问题，#1450
+- 修复 Select 在某些情况下绑定值和显示值不同步的问题
+- 新增 Select 的 `multiple-limit` 和 `allow-create` 属性
+- 修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438
+- 修复 Tree 有时在获取子级数据后视图不更新的问题，#1439
+- 修复 Table 在 windows 系统下的若干样式问题，#1464 #1507
+- 修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451
+- 新增 Table 的 `row-dblclick` 事件，#1362
+
+### 1.0.3
+*2016-11-28*
+
+- 修复 Pagination 的 `currentPage` 在某些情况下设置无效的情况，#1336
+- 修复 DatePicker 为 `month` 且设置了 `disabledDate` 的情况下切换年份时界面未更新的问题，#1158
+- 修复 DatePicker readonly 时未禁用清除按钮的问题，#1238
+- 修复 Slider 绑定值为 `NaN` 以及 `step` 小于 1 时无法正常工作的问题，#1239 #1282
+- 增加 Table 的多表头功能，#1312
+- 增加 Table 的 `rowStyle` 属性，#1348
+- 修复 TableColumn 的某些属性无法动态设置的问题，#1314
+- 增加 Tree 的 `filter-node-method` 属性和 `filter` 方法，#1257
+- 增加 Tree 的 `getCheckedKeys` 和 `setCheckedKeys` 方法，#1254
+- 重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152
+- 修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359
+- 增加 Form 中深对象验证的支持，#1363
+- 增加 Autocomplete 里的 `append` 和 `prepend` API，#1369
+- 增加 Pagination `pageSizes` 属性的动态支持，#1372
+- 增加 Radio Button 自定义选中按钮样式的 API，#1380
+- 增加 Menu Group 支持通过 slot 来设置 title，#1382
+- 修复 DatePicker 选择年的 bug，#1385
+- 新增 Upload 默认已上传的文件列表 API，#1393
+- 增加 Checkbox `label` 属性绑定的多类型支持，#1400
+- 增加 Tree 的 `setChecked` 方法，#1422
+
+### 1.0.2
+*2016-11-18*
+
+- 新增 Table `context` 属性，可以指定自定义 column 内部可获取的上下文，#1161
+- 新增 多种语言支持
+- 修复 没有正确动态渲染语言的问题，#1160
+- 新增 Alert 的 `render-content` 属性，#568
+- 新增 Button 的 focus 样式，#982
+- 修复 Switch 的 `change` 事件触发时机错误的问题，#1162
+- 修复 TimeSelect 开始时间设置 `00:00` 后会被禁用的问题，#676
+- 新增 Table `show-header` 属性，`header-click` 事件。#1195
+- 完善 Table 的 `height` 属性，当 `height` 属性为字符串的时候，表示 Table 的高度受外部样式控制，#1195
+- 修复 Table 的 `selection-change` 在某些情况下不触发的问题，#1198
+- 修复 Table 动态修改 `fixed` 属性可能会造成锁定列不消失的问题，#1182
+
 ### 1.0.1
 *2016-11-16*
 
@@ -23,7 +205,7 @@
 - 修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070
 - 新增 $loading 服务，用以调用 Loading
 - 新增 Popover 可手动控制显示隐藏，将 trigger 设置为 `manual`
-- 新增 Tree 的 `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` 属性，`setCheckedNodes` 方法。
+- 新增 Tree 的 `nodeKey`、`emptyText`、`checkStrictly`、`defaultExpandAll`、`autoExpandParent`、`defaultCheckedKeys`、`defaultExpandedKeys` 属性，`setCheckedNodes` 方法。
 
 
 ### 1.0.0

FAQ.md

@@ -19,10 +19,12 @@
 <details>
 <summary>如何在 Table 组件的每一行添加操作该行数据的按钮？</summary>
 
-使用 inline-template 即可：
+使用 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 即可：
 ```html
-<el-table-column label="操作" inline-template>
-  <el-button @click.native="showDetail(row)">查看详情</el-button>
+<el-table-column label="操作">
+  <template scoped="props">
+    <el-button @click.native="showDetail(props.row)">查看详情</el-button>
+  </template>
 </el-table-column>
 ```
 参数 `row` 即为对应行的数据。
@@ -34,6 +36,27 @@
 请阅读 Vue 文档 [Render Function](http://vuejs.org/v2/guide/render-function.html) 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 `babel-plugin-transform-vue-jsx`，并参照其[文档](https://github.com/vuejs/babel-plugin-transform-vue-jsx)进行配置。
 </details>
 
+<details>
+<summary>如何使用第三方图标库？</summary>
+
+只要修改第三方图标库的前缀（具体方法参阅第三方库的文档），并编写相应的 CSS，即可在 Element 中像使用内置图标一样使用第三方图标。例如，将第三方库的前缀改为 `el-icon-my`，然后在其 CSS 文件中添加：
+```css
+[class^="el-icon-my"], [class*=" el-icon-my"] {
+  font-family:"your-font-family" !important;
+
+  /* 以下内容参照第三方图标库本身的规则 */
+  font-size: inherit;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+具体使用时，和 Element 内置的图标用法一样。比如在 `el-input` 中：
+```html
+<el-input icon="my-xxx" />
+```
+</details>
+
 <details>
 <summary>你们的文档怎么偷偷更新了？</summary>
 
@@ -83,10 +106,12 @@ For other components, the `.native` modifier is still mandatory.
 <details>
 <summary>How do I add buttons in each row of Table to operate data of that row?</summary>
 
-Just use `inline-template`:
+Just use [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
 ```html
-<el-table-column label="Operations" inline-template>
-  <el-button @click.native="showDetail(row)">Details</el-button>
+<el-table-column label="Operations">
+  <template scoped="props">
+    <el-button @click.native="showDetail(props.row)">Details</el-button>
+  </template>
 </el-table-column>
 ```
 The parameter `row` is the data object of corresponding row.
@@ -98,6 +123,27 @@ The parameter `row` is the data object of corresponding row.
 Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.
 </details>
 
+<details>
+<summary>How do I use third-party icon font library with Element?</summary>
+
+You just need to modify the class name prefix of the third-party library (see their docs for how to do it), and write some CSS, then you can use them just like you use Element built-in icons. For example, change the prefix to `el-icon-my`, and then add the following to its CSS:
+```css
+[class^="el-icon-my"], [class*=" el-icon-my"] {
+  font-family:"your-font-family" !important;
+
+  /* The following is based on original CSS rules of third-party library */
+  font-size: inherit;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+Now you can use them as you do with built-in icons. For example, in `el-input`:
+```html
+<el-input icon="my-xxx" />
+```
+</details>
+
 <details>
 <summary>When do you update documentations of Element?</summary>
 

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,13 +10,17 @@
 ![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
  - [element-starter](https://github.com/ElementUI/element-starter)
  - [element-cooking-starter](https://github.com/ElementUI/element-cooking-starter)
@@ -65,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

build/bin/build-all.js

@@ -19,7 +19,7 @@ Object.keys(components).forEach(key => {
 });
 
 const paths = componentPaths.join(',');
-const cli = `node_modules/.bin/cooking build -c ${paths} -p`;
+const cli = path.join('node_modules', '.bin', 'cooking') + ` build -c ${paths} -p`;
 
 execSync(cli, {
   stdio: 'inherit'

build/bin/build-entry.js

@@ -16,6 +16,7 @@ const install = function(Vue, opts = {}) {
   /* istanbul ignore if */
   if (install.installed) return;
   locale.use(opts.locale);
+  locale.i18n(opts.i18n);
 
 {{install}}
 
@@ -38,9 +39,9 @@ if (typeof window !== 'undefined' && window.Vue) {
 module.exports = {
   version: '{{version}}',
   locale: locale.use,
+  i18n: locale.i18n,
   install,
-  Loading: Loading.directive,
-  LoadingService: Loading.service,
+  Loading,
 {{list}}
 };
 `;

build/bin/new.js

@@ -33,6 +33,7 @@ export default ${ComponentName};`
     filename: 'cooking.conf.js',
     content: `var cooking = require('cooking');
 var path = require('path');
+var config = require('../../build/config');
 
 cooking.set({
   entry: {
@@ -52,7 +53,7 @@ module.exports = cooking.resolve();`
   {
     filename: 'package.json',
     content: `{
-  "name": "el-${componentname}",
+  "name": "element-${componentname}",
   "version": "0.0.0",
   "description": "A ${componentname} component for Vue.js.",
   "keywords": [
@@ -75,7 +76,7 @@ module.exports = cooking.resolve();`
 
 <script>
 export default {
-  name: 'el-${componentname}'
+  name: 'El${ComponentName}'
 };
 </script>`
   },
@@ -90,16 +91,16 @@ export default {
   {
     filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),
     content: `import { createTest, destroyVM } from '../util';
-import Alert from 'packages/{{componentname}}';
+import ${ComponentName} from 'packages/${componentname}';
 
-describe('{{ComponentName}}', () => {
+describe('${ComponentName}', () => {
   let vm;
   afterEach(() => {
     destroyVM(vm);
   });
 
   it('create', () => {
-    vm = createTest({{ComponentName}}, true);
+    vm = createTest(${ComponentName}, true);
     expect(vm.$el).to.exist;
   });
 });

build/config.js

@@ -6,6 +6,7 @@ var saladConfig = require('../packages/theme-default/salad.config.json');
 
 var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
 var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));
+var transitionList = fs.readdirSync(path.resolve(__dirname, '../src/transitions'));
 var externals = {};
 
 Object.keys(Components).forEach(function(key) {
@@ -21,6 +22,10 @@ mixinsList.forEach(function(file) {
   file = path.basename(file, '.js');
   externals[`element-ui/src/mixins/${file}`] = `element-ui/lib/mixins/${file}`;
 });
+transitionList.forEach(function(file) {
+  file = path.basename(file, '.js');
+  externals[`element-ui/src/transitions/${file}`] = `element-ui/lib/transitions/${file}`;
+});
 
 externals = [Object.assign({
   vue: 'vue'

build/cooking.demo.js

@@ -1,6 +1,7 @@
 var cooking = require('cooking');
 var config = require('./config');
 var md = require('markdown-it')();
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 var striptags = require('./strip-tags');
 var slugify = require('transliteration').slugify;
 var isProd = process.env.NODE_ENV === 'production';
@@ -26,9 +27,10 @@ cooking.set({
       favicon: './examples/favicon.ico'
     }
   ],
-  publicPath: process.env.CI_ENV || '/',
+  publicPath: process.env.CI_ENV || '',
   hash: true,
   devServer: {
+    hostname: '0.0.0.0',
     port: 8085,
     log: false,
     publicPath: '/'
@@ -43,6 +45,11 @@ cooking.set({
   postcss: config.postcss
 });
 
+// fix publicPath
+if (!process.env.CI_ENV) {
+  cooking.add('output.publicPath', '');
+}
+
 cooking.add('loader.md', {
   test: /\.md$/,
   loader: 'vue-markdown-loader'
@@ -107,5 +114,8 @@ if (isProd) {
   cooking.add('externals.vue-router', 'VueRouter');
 }
 
+cooking.add('plugin.CopyWebpackPlugin', new CopyWebpackPlugin([
+  { from: 'examples/versions.json' }
+]));
 cooking.add('vue.preserveWhitespace', false);
 module.exports = cooking.resolve();

build/cooking.test.js

@@ -8,7 +8,7 @@ cooking.set({
   extends: process.env.CI_ENV ? ['vue2'] : ['vue2', 'lint'],
   minimize: false,
   alias: Object.assign(config.alias, {
-    'vue$': 'vue/dist/vue.js'
+    'vue$': 'vue/dist/vue.common.js'
   }),
   postcss: function(webapck) {
     return [

build/deploy-ci.sh

@@ -1,42 +1,19 @@
 #! /bin/sh
 mkdir temp_web
+git config --global user.name "element-bot"
+git config --global user.email "wallement@gmail.com"
 
-# build dev site
-if [ "$TRAVIS_BRANCH" = "master" ] && [ "$GH_TOKEN" ]; then
-  npm run deploy:dev
-  cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElementUI/dev.git && cd dev
-  git config user.name "element_bot"
-  git config user.email "element_bot"
-  rm -rf `find * ! -name README.md`
-  cp -rf ../../examples/element-ui/** .
-  git add -A .
-  git commit -m "$TRAVIS_COMMIT_MSG"
-  git push origin master
-  cd ../..
-fi
-
-# push theme-default
-if [ "$TRAVIS_BRANCH" = "master" ] && [ "$GH_TOKEN" ]; then
-  cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
-  git config user.name "element_bot"
-  git config user.email "element_bot"
-  rm -rf *
-  cp -rf ../../packages/theme-default/** .
-  git add -A .
-  git commit -m "$TRAVIS_COMMIT_MSG"
-  git push origin master --tags
-  cd ../..
+if [ "$ROT_TOKEN" = "" ]; then
+  echo "Bye~"
+  exit 0
 fi
 
-if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then
+# release
+if [ "$TRAVIS_TAG" ]; then
   # build lib
   npm run dist
   cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElementUI/lib.git && cd lib
-  git config user.name "element_bot"
-  git config user.email "element_bot"
+  git clone https://$ROT_TOKEN@github.com/ElementUI/lib.git && cd lib
   rm -rf `find * ! -name README.md`
   cp -rf ../../lib/** .
   git add -A .
@@ -47,9 +24,7 @@ if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then
 
   # build theme-default
   cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
-  git config user.name "element_bot"
-  git config user.email "element_bot"
+  git clone https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
   rm -rf *
   cp -rf ../../packages/theme-default/** .
   git add -A .
@@ -61,14 +36,45 @@ if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then
   # build site
   npm run deploy:build
   cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElemeFE/element.git && cd element
-  git config user.name "element_bot"
-  git config user.email "element_bot"
-  git checkout gh-pages
-  rm -rf `find * ! -name README.md`
+  git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
+  # build sub folder
+  echo $TRAVIS_TAG
+  export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
+  echo $SUB_FOLDER
+
+  SUB_FOLDER='1.1'
+  mkdir $SUB_FOLDER
+  rm -rf *.js *.css *.map static
+  rm -rf $SUB_FOLDER/**
   cp -rf ../../examples/element-ui/** .
+  cp -rf ../../examples/element-ui/** $SUB_FOLDER/
   git add -A .
   git commit -m "$TRAVIS_COMMIT_MSG"
   git push origin gh-pages
   cd ../..
+
+  echo "DONE, Bye~"
+  exit 0
 fi
+
+# build dev site
+npm run build:file && CI_ENV=/dev/$TRAVIS_BRANCH/ node_modules/.bin/cooking build -c build/cooking.demo.js
+cd temp_web
+git clone https://$ROT_TOKEN@github.com/ElementUI/dev.git && cd dev
+mkdir $TRAVIS_BRANCH
+rm -rf $TRAVIS_BRANCH/**
+cp -rf ../../examples/element-ui/** $TRAVIS_BRANCH/
+git add -A .
+git commit -m "$TRAVIS_COMMIT_MSG"
+git push origin master
+cd ../..
+
+# push dev theme-default
+cd temp_web
+git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
+rm -rf *
+cp -rf ../../packages/theme-default/** .
+git add -A .
+git commit -m "$TRAVIS_COMMIT_MSG"
+git push origin $TRAVIS_BRANCH
+cd ../..

build/git-release.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env sh
+git checkout dev
+
+if test -n "$(git status --porcelain)"; then
+  echo 'Unclean working tree. Commit or stash changes first.' >&2;
+  exit 128;
+fi
+
+if ! git fetch --quiet 2>/dev/null; then
+  echo 'There was a problem fetching your branch. Run `git fetch` to see more...' >&2;
+  exit 128;
+fi
+
+if test "0" != "$(git rev-list --count --left-only @'{u}'...HEAD)"; then
+  echo 'Remote history differ. Please pull changes.' >&2;
+  exit 128;
+fi
+
+echo 'No conflicts.' >&2;

build/release.sh

@@ -1,3 +1,7 @@
+git checkout master
+git merge dev
+
+#!/usr/bin/env sh
 set -e
 echo "Enter release version: "
 read VERSION
@@ -24,7 +28,11 @@ then
   npm version $VERSION --message "[release] $VERSION"
 
   # publish
-  git push eleme refs/tags/v$VERSION
   git push eleme master
+  git push eleme refs/tags/v$VERSION
+  git checkout dev
+  git rebase master
+  git push eleme dev
+
   npm publish
 fi

components.json

@@ -53,5 +53,10 @@
   "card": "./packages/card/index.js",
   "rate": "./packages/rate/index.js",
   "steps": "./packages/steps/index.js",
-  "step": "./packages/step/index.js"
+  "step": "./packages/step/index.js",
+  "carousel": "./packages/carousel/index.js",
+  "scrollbar": "./packages/scrollbar/index.js",
+  "carousel-item": "./packages/carousel-item/index.js",
+  "collapse": "./packages/collapse/index.js",
+  "collapse-item": "./packages/collapse-item/index.js"
 }

examples/app.vue

@@ -1,7 +1,6 @@
 <style lang="css">
   @import 'highlight.js/styles/color-brewer.css';
   @import 'assets/styles/common.css';
-  @import 'assets/styles/fonts/style.css';
 
   html, body {
     margin: 0;
@@ -54,6 +53,7 @@
   .container,
   .page-container {
     width: 1140px;
+    padding: 0 30px;
     margin: 0 auto;
   }
 
@@ -101,6 +101,13 @@
       width: 100%;
     }
   }
+
+  @media (max-width: 768px) {
+    .container,
+    .page-container {
+      padding: 0 20px;
+    }
+  }
 </style>
 
 <template>
@@ -152,13 +159,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);
         }
       }

examples/assets/images/element-logo-small.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="30px" height="30px" viewBox="0 0 38 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
+    <title>Shape Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#FFFFFF">
+            <path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
+        </g>
+    </g>
+</svg>

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;
 }

examples/components/footer.vue

@@ -2,7 +2,7 @@
   <footer class="footer">
     <div class="container">
       <div class="footer-main">
-        <p class="footer-main-title">Element 1.0 Hydrogen</p>
+        <p class="footer-main-title">Element {{ version }} Helium</p>
         <a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
         <a href="https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
       </div>
@@ -40,6 +40,7 @@
 
     .container {
       height: 100%;
+      box-sizing: border-box;
     }
 
     .footer-main {
@@ -122,12 +123,26 @@
       margin: 10px;
     }
   }
+  @media (max-width: 768px) {
+    .footer {
+      .footer-social {
+        display: none;
+      }
+    }
+  }
 </style>
 
 <script type="text/babel">
   import compoLang from '../i18n/component.json';
+  import { version } from 'main/index.js';
 
   export default {
+    data() {
+      return {
+        version
+      };
+    },
+
     computed: {
       lang() {
         return this.$route.path.split('/')[1];

examples/components/header.vue

@@ -15,6 +15,7 @@
 
     .container {
       height: 100%;
+      box-sizing: border-box;
     }
 
     h1 {
@@ -51,9 +52,13 @@
       padding: 0;
       margin: 0;
     }
-    .nav-logo {
+    .nav-logo,
+    .nav-logo-small {
       vertical-align: sub;
     }
+    .nav-logo-small {
+      display: none;
+    }
     .nav-item {
       margin: 0;
       float: left;
@@ -116,6 +121,40 @@
     top: 0;
     background-color: rgba(32, 160, 255, 0);
   }
+
+  @media (max-width: 850px) {
+    .header {
+      .nav-logo {
+        display: none;
+      }
+      .nav-logo-small {
+        display: inline-block;
+      }
+      .nav-item {
+        margin-left: 6px;
+
+        &:last-child {
+          margin-left: 10px;
+        }
+         
+        a {
+          padding: 0 5px;
+        }
+      }
+    }
+  }
+  @media (max-width: 700px) {
+    .header {
+      .container {
+        padding: 0 12px;
+      }
+      .nav-item a,
+      .nav-lang {
+        font-size: 12px;
+        vertical-align: top;
+      }
+    }
+  }
 </style>
 <template>
   <div class="headerWrapper">
@@ -131,6 +170,10 @@
             src="../assets/images/element-logo.svg"
             alt="element-logo"
             class="nav-logo">
+          <img
+            src="../assets/images/element-logo-small.svg"
+            alt="element-logo"
+            class="nav-logo-small">
         </router-link></h1>
         <ul class="nav">
           <li class="nav-item">
@@ -184,9 +227,12 @@
       };
     },
     watch: {
-      '$route.path'() {
-        this.isHome = this.$route.name === 'home';
-        this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
+      '$route.path': {
+        immediate: true,
+        handler() {
+          this.isHome = /^home/.test(this.$route.name);
+          this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
+        }
       }
     },
     computed: {
@@ -205,7 +251,6 @@
       }
     },
     mounted() {
-      this.isHome = this.$route.name === 'home';
       function scroll(fn) {
         window.addEventListener('scroll', () => {
           fn();

examples/components/side-nav.vue

@@ -12,6 +12,42 @@
       margin: 0;
       overflow: hidden;
     }
+    
+    .nav-dropdown {
+      margin-bottom: 6px;
+      width: 100%;
+      span {
+        display: block;
+        width: 100%;
+        font-size: 16px;
+        color: #5e6d82;
+        line-height: 40px;
+        transition: .2s;
+        padding-bottom: 6px;
+        border-bottom: 1px solid #eaeefb;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+      i {
+        transition: .2s;
+        font-size: 12px;
+        color: #d3dce6;
+      }
+      @when active {
+        span, i {
+          color: #20a0ff;
+        }
+        i {
+          transform: rotateZ(180deg) translateY(2px);
+        }
+      }
+      &:hover {
+        span, i {
+          color: #20a0ff;
+        }
+      }
+    }
 
     .nav-item {
       a {
@@ -53,12 +89,40 @@
       margin-top: 10px;
     }
   }
+  .nav-dropdown-list {
+    width: 120px;
+    margin-top: -8px;
+    li {
+      font-size: 14px;
+    }
+  }
 </style>
 <template>
-  <div class="side-nav">
+  <div class="side-nav" :style="navStyle">
+    <el-dropdown
+      v-show="isComponentPage"
+      trigger="click"
+      class="nav-dropdown"
+      :class="{ 'is-active': dropdownVisible }">
+      <span>
+        {{ langConfig.dropdown }}{{ version }}
+        <i class="el-icon-caret-bottom el-icon--right"></i>
+      </span>
+      <el-dropdown-menu
+        slot="dropdown"
+        :offset="-80"
+        class="nav-dropdown-list"
+        @input="handleDropdownToggle">
+        <el-dropdown-item
+          v-for="item in Object.keys(versions)"
+          @click.native="switchVersion(item)">
+          {{ item }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <ul>
       <li class="nav-item" v-for="item in data">
-        <a v-if="!item.path">{{item.name}}</a>
+        <a v-if="!item.path" @click="expandMenu">{{item.name}}</a>
         <router-link
           v-else
           active-class="active"
@@ -79,7 +143,7 @@
         </ul>
         <template v-if="item.groups">
           <div class="nav-group" v-for="group in item.groups">
-            <div class="nav-group__title">{{group.groupName}}</div>
+            <div class="nav-group__title" @click="expandMenu">{{group.groupName}}</div>
             <ul class="pure-menu-list">
               <li
                 class="nav-item"
@@ -99,6 +163,9 @@
   </div>
 </template>
 <script>
+  import compoLang from '../i18n/component.json';
+  import { version } from 'main/index.js';
+
   export default {
     props: {
       data: Array,
@@ -110,8 +177,90 @@
     data() {
       return {
         highlights: [],
-        navState: []
+        navState: [],
+        isSmallScreen: false,
+        versions: [],
+        version,
+        dropdownVisible: false
+      };
+    },
+    watch: {
+      '$route.path'() {
+        this.handlePathChange();
+      }
+    },
+    computed: {
+      navStyle() {
+        return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
+      },
+      isComponentPage() {
+        return /^component-/.test(this.$route.name);
+      },
+      langConfig() {
+        return compoLang.filter(config => config.lang === this.$route.meta.lang)[0]['nav'];
+      }
+    },
+    methods: {
+      switchVersion(version) {
+        if (version === this.version) return;
+        location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
+      },
+      handleResize() {
+        this.isSmallScreen = document.documentElement.clientWidth < 768;
+        this.handlePathChange();
+      },
+      handlePathChange() {
+        if (!this.isSmallScreen) {
+          this.expandAllMenu();
+          return;
+        }
+        this.$nextTick(() => {
+          this.hideAllMenu();
+          let activeAnchor = this.$el.querySelector('a.active');
+          let ul = activeAnchor.parentNode;
+          while (ul.tagName !== 'UL') {
+            ul = ul.parentNode;
+          }
+          ul.style.height = 'auto';
+        });
+      },
+      hideAllMenu() {
+        [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+          ul.style.height = '0';
+        });
+      },
+      expandAllMenu() {
+        [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+          ul.style.height = 'auto';
+        });
+      },
+      expandMenu(event) {
+        if (!this.isSmallScreen) return;
+        let target = event.currentTarget;
+        if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
+        this.hideAllMenu();
+        event.currentTarget.nextElementSibling.style.height = 'auto';
+      },
+      handleDropdownToggle(visible) {
+        this.dropdownVisible = visible;
+      }
+    },
+    created() {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = _ => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          this.versions = JSON.parse(xhr.responseText);
+        }
       };
+      xhr.open('GET', '/versions.json');
+      xhr.send();
+    },
+    mounted() {
+      this.handleResize();
+      window.addEventListener('resize', this.handleResize);
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize);
     }
   };
 </script>

examples/docs/en-US/alert.md

@@ -165,7 +165,7 @@ Description includes a message with more detailed information.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | **title** | title **REQUIRED** | string | — | — |
 | type | component type | string | success/warning/info/error | info |
-| description | supportive text | string | — | — |
+| description | descriptive text. Can also be passed with the default slot | string | — | — |
 | closable | if closable or not | boolean | — | true |
 | close-text | customized close button text | string | — | — |
 | show-icon | if a type icon is displayed | boolean | — | false |

examples/docs/en-US/badge.md

@@ -134,4 +134,5 @@ Use a red dot to mark content that needs to be noticed.
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | value          | display value      | string, number          |          —             |    —     |
 | max          |  maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number`   | number  |         —              |     —    |
-| is-dot       | if a little dot is displayed   | boolean  |  —  |  false |
+| is-dot       | if a little dot is displayed   | boolean  |  —  |  false |
+| hidden | hidden badge | boolean | — | false |

examples/docs/en-US/button.md

@@ -1,5 +1,5 @@
 <script>
-  import { addClass } from 'wind-dom/src/class';
+  import { addClass } from 'element-ui/src/utils/dom';
   export default {
     data() {
       return {
@@ -78,7 +78,7 @@ Different colors represent different meanings.
 ```
 :::
 
-### Icon Button 
+### Icon Button
 
 Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.
 
@@ -142,8 +142,9 @@ Besides default size, Button component provides three additional sizes for you t
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | button size   | string  |   large/small/mini            |    —     |
 | type     | button type   | string    |   primary/success/warning/danger/info/text |     —    |
-| plain     | determine whether it's a plain button   | Boolean    | true,false | false   |
-| disabled  | disable the button    | boolean   | true, false   | false   |
+| plain     | determine whether it's a plain button   | Boolean    | — | false   |
+| loading   | determine whether it's loading   | Boolean    | — | false   |
+| disabled  | disable the button    | boolean   | —   | false   |
 | icon  | button icon, accepts an icon name of Element icon component | string   |  —  |  —  |
 | autofocus  | same as native button's `autofocus` | boolean   |  —  |  false  |
 | native-type | same as native button's `type` | string | button/submit/reset | button |

examples/docs/en-US/carousel.md

@@ -0,0 +1,189 @@
+<script>
+  export default {
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+        demos[0].className += ' small';
+        demos[3].className += ' medium';
+      });
+    }
+  }
+</script>
+## Carousel
+
+Loop a series of images or texts in a limited space
+
+### Basic usage
+
+::: demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Switch when indicator is hovered (default)</span>
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in 4">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  <div class="block">
+    <span class="demonstration">Switch when indicator is clicked</span>
+    <el-carousel trigger="click" height="150px">
+      <el-carousel-item v-for="item in 4">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Indicators
+
+Indicators can be displayed outside the carousel
+
+::: demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
+```html
+<template>
+  <el-carousel indicator-position="outside">
+    <el-carousel-item v-for="item in 4">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Arrows
+
+You can define when arrows are displayed
+
+::: demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
+```html
+<template>
+  <el-carousel :interval="5000" arrow="always">
+    <el-carousel-item v-for="item in 4">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Card mode
+
+When a page is wide enough but has limited height, you can activate card mode for carousels
+
+::: demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
+```html
+<template>
+  <el-carousel :interval="4000" type="card" height="200px">
+    <el-carousel-item v-for="item in 6">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Carousel Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | height of the carousel | number | — | 300 |
+| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |
+| trigger | how indicators are triggered | string | click | — |
+| autoplay | whether automatically loop the slides | boolean | — | true |
+| interval | interval of the auto loop, in milliseconds | number | — | 3000 |
+| indicator-position | position of the indicators | string | outside/none | — |
+| arrow | when arrows are shown | string | always/hover/never | hover |
+| type | type of the Carousel | string | card | — |
+
+### Carousel Events
+| Event Name | Description | Parameters |
+|---------|---------|---------|
+| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
+
+### Carousel Methods
+| Method | Description | Parameters |
+|---------- |-------------- | -- |
+| setActiveItem | manually switch slide | index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` |
+| prev | switch to the previous slide | — |
+| next | switch to the next slide | — |
+
+### Carousel-Item Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name | name of the item, can be used in `setActiveItem` | string | — | — |

examples/docs/en-US/checkbox.md

@@ -40,7 +40,7 @@ Checkbox can be used alone to switch between two states.
 ```
 :::
 
-## Disabled State
+### Disabled State
 
 Disabled state for checkbox.
 

examples/docs/en-US/collapse.md

@@ -0,0 +1,141 @@
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1'],
+        activeName: '1'
+      };
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      }
+    }
+  }
+</script>
+
+## Collapse
+
+Use Collapse to store contents.
+
+### Basic usage
+
+You can expand multiple panels
+
+:::demo
+```html
+<el-collapse v-model="activeNames" @change="handleChange">
+  <el-collapse-item title="Consistency" name="1">
+    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficiency" name="3">
+    <div>Simplify the process: keep operating process simple and intuitive;</div>
+    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllability" name="4">
+    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+  </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1']
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Accordion
+
+In accordion mode, only one panel can be expanded at once
+
+:::demo Activate accordion mode using the `accordion` attribute.
+```html
+<el-collapse v-model="activeName" accordion>
+  <el-collapse-item title="Consistency" name="1">
+    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficiency" name="3">
+    <div>Simplify the process: keep operating process simple and intuitive;</div>
+    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllability" name="4">
+    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+  </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Custom title
+
+Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
+
+:::demo
+```html
+<el-collapse accordion>
+  <el-collapse-item name="1">
+    <template slot="title">
+      Consistency<i class="header-icon el-icon-information"></i>
+    </template>
+    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficiency" name="3">
+    <div>Simplify the process: keep operating process simple and intuitive;</div>
+    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllability" name="4">
+    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+  </el-collapse-item>
+</el-collapse>
+```
+:::
+
+### Collapse Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| accordion | whether to activate accordion mode | boolean | — | false |
+| value | currently active panel | string (accordion mode)/array (non-accordion mode) | — | — |
+
+### Collapse Events
+| Event Name | Description | Parameters |
+|---------|---------|---------|
+| change | triggers when active panels change | activeNames: array (non-accordion mode)/string (accordion mode) |
+
+### Collapse Item Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name | unique identification of the panel | string/number | — | — |
+| title | title of the panel | string | — | — |

examples/docs/en-US/custom-theme.md

@@ -1,10 +1,10 @@
 ## Custom theme
-Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tool kicks in. 
+Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tool kicks in.
 
 ### Install related tool
 First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
 ```shell
-npm i element-theme -D
+npm i element-theme -g
 ```
 
 Then install the default theme from npm or GitHub.
@@ -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
-node_modules/.bin/et -i [custom output directory]
+et -i [custom output file]
 
 > ✔ Generator variables file
 ```
@@ -51,9 +51,9 @@ Just edit `element-variables.css`, e.g. changing the theme color to red:
 ```
 
 ### Build theme
-After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`:
+After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
 ```shell
-node_modules/.bin/et
+et
 
 > ✔ build theme font
 > ✔ build element theme
@@ -63,7 +63,7 @@ node_modules/.bin/et
 By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
 
 ```javascript
-import './theme/index.css'
+import '../theme/index.css'
 import ElementUI from 'element-ui'
 import Vue from 'vue'
 

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

@@ -191,8 +191,7 @@ Picking a date range is supported.
     <el-date-picker
       v-model="value6"
       type="daterange"
-      placeholder="Pick a range"
-      style="width: 220px">
+      placeholder="Pick a range">
     </el-date-picker>
   </div>
   <div class="block">
@@ -202,8 +201,7 @@ Picking a date range is supported.
       type="daterange"
       align="right"
       placeholder="Pick a range"
-      :picker-options="pickerOptions2"
-      style="width: 220px">
+      :picker-options="pickerOptions2">
     </el-date-picker>
   </div>
 </template>
@@ -253,12 +251,15 @@ Picking a date range is supported.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | whether DatePicker is read only | boolean | — | false |
-| disabled | whether DatePicker is disabled | boolean | - | false |
-| editable | whether the input is editable | boolean | - | true |
+| disabled | whether DatePicker is disabled | boolean | — | false |
+|size | size of Input | string | large/small/mini | — |
+| editable | whether the input is editable | boolean | — | true |
+| clearable | Whether to show clear button | 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
@@ -266,9 +267,16 @@ Picking a date range is supported.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
+| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
 
 ### shortcuts
 | 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 | — | — |
+
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | triggers when input value changes | formatted value |

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

@@ -147,8 +147,7 @@ Select date and time in one picker.
     <el-date-picker
       v-model="value3"
       type="datetimerange"
-      placeholder="Select time range"
-      style="width:350px">
+      placeholder="Select time range">
     </el-date-picker>
   </div>
   <div class="block">
@@ -158,8 +157,7 @@ Select date and time in one picker.
       type="datetimerange"
       :picker-options="pickerOptions2"
       placeholder="Select time range"
-      align="right"
-      style="width:350px">
+      align="right">
     </el-date-picker>
   </div>
 </template>
@@ -195,7 +193,7 @@ Select date and time in one picker.
             }
           }]
         },
-        value3: '',
+        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value4: ''
       };
     }
@@ -208,12 +206,15 @@ Select date and time in one picker.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | whether DatePicker is read only | boolean | — | false |
-| disabled | whether DatePicker is disabled | boolean | - | false |
-| editable | whether the input is editable | boolean | - | true |
+| disabled | whether DatePicker is disabled | boolean | — | false |
+| editable | whether the input is editable | boolean | — | true |
+| clearable | Whether to show clear button | 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 +227,11 @@ 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 | — | — |
+
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | triggers when input value changes | formatted value |
+

examples/docs/en-US/dialog.md

@@ -54,13 +54,13 @@ Dialog pops up a dialog box, and it's quite customizable.
 :::demo Set the `v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. This example explicitly changes the value of `v-model` to toggle Dialog. In addition, we also provide `open` and `close` method, which you can call to open/close the Dialog.
 
 ```html
-<el-button type="text" @click.native="dialogVisible = true">click to open the Dialog</el-button>
+<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
 
 <el-dialog title="Tips" v-model="dialogVisible" size="tiny">
   <span>This is a message</span>
   <span slot="footer" class="dialog-footer">
-    <el-button @click.native="dialogVisible = false">Cancel</el-button>
-    <el-button type="primary" @click.native="dialogVisible = false">Confirm</el-button>
+    <el-button @click="dialogVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
   </span>
 </el-dialog>
 
@@ -84,7 +84,7 @@ The content of Dialog can be anything, even a table or a form. This example show
 
 ```html
 <!-- Table -->
-<el-button type="text" @click.native="dialogTableVisible = true" type="text">open a Table nested Dialog</el-button>
+<el-button type="text" @click="dialogTableVisible = true" type="text">open a Table nested Dialog</el-button>
 
 <el-dialog title="Shipping address" v-model="dialogTableVisible">
   <el-table :data="gridData">
@@ -95,7 +95,7 @@ The content of Dialog can be anything, even a table or a form. This example show
 </el-dialog>
 
 <!-- Form -->
-<el-button type="text" @click.native="dialogFormVisible = true" type="text">open a Form nested Dialog</el-button>
+<el-button type="text" @click="dialogFormVisible = true" type="text">open a Form nested Dialog</el-button>
 
 <el-dialog title="Shipping address" v-model="dialogFormVisible">
   <el-form :model="form">
@@ -110,8 +110,8 @@ The content of Dialog can be anything, even a table or a form. This example show
     </el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
-    <el-button @click.native="dialogFormVisible = false">Cancel</el-button>
-    <el-button type="primary" @click.native="dialogFormVisible = false">Confirm</el-button>
+    <el-button @click="dialogFormVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
   </span>
 </el-dialog>
 

examples/docs/en-US/dropdown.md

@@ -3,6 +3,9 @@
     methods: {
       handleClick() {
         alert('button click');
+      },
+      handleCommand(command) {
+        this.$message('click on item ' + command);
       }
     }
   }
@@ -104,6 +107,59 @@ Click the triggering element or hover on it.
 </el-row>
 ```
 :::
+
+### Menu hiding behavior
+
+Use `hide-on-click` to define if menu closes on clicking.
+
+:::demo By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.
+```html
+<el-dropdown :hide-on-click="false">
+  <span class="el-dropdown-link">
+    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
+### Command event
+
+Clicking each dropdown item fires an event whose parameter is assigned by each item.
+
+:::demo
+```html
+<el-dropdown @command="handleCommand">
+  <span class="el-dropdown-link">
+    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item command="a">Action 1</el-dropdown-item>
+    <el-dropdown-item command="b">Action 2</el-dropdown-item>
+    <el-dropdown-item command="c">Action 3</el-dropdown-item>
+    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+<script>
+  export default {
+    methods: {
+      handleCommand(command) {
+        this.$message('click on item ' + command);
+      }
+    }
+  }
+</script>
+```
+:::
+
+
 ### Dropdown Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
@@ -113,6 +169,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 |

examples/docs/en-US/form.md

@@ -2,13 +2,14 @@
   export default {
     data() {
       var checkAge = (rule, value, callback) => {
-        var age = parseInt(value, 10);
-
+        if (!value) {
+          return callback(new Error('Please input the age'));
+        }
         setTimeout(() => {
-          if (!Number.isInteger(age)) {
+          if (!Number.isInteger(value)) {
             callback(new Error('Please input digits'));
-          } else{
-            if (age < 18) {
+          } else {
+            if (value < 18) {
               callback(new Error('Age must be greater than 18'));
             } else {
               callback();
@@ -110,88 +111,56 @@
         },
         rules2: {
           pass: [
-            { required: true, message: 'Please input the password', trigger: 'blur' },
-            { validator: validaePass }
+            { validator: validaePass, trigger: 'blur' }
           ],
           checkPass: [
-            { required: true, message: 'Please input the password again', trigger: 'blur' },
-            { validator: validaePass2 }
+            { validator: validaePass2, trigger: 'blur' }
           ],
           age: [
-            { required: true, message: 'Please input the age', trigger: 'blur' },
-            { validator: checkAge, trigger: 'change' }
+            { validator: checkAge, trigger: 'blur' }
           ]
         },
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
-            key: 1,
+            key: Date.now(),
             value: ''
           }],
           email: ''
         },
-        dynamicRule: {
-          email: [
-            { required: true, message: 'Please input email address', trigger: 'blur' },
-            { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
-          ]
+        numberValidateForm: {
+          age: ''
         }
       };
     },
     methods: {
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      onSubmit() {
+        console.log('submit!');
       },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate(valid => {
-          if (valid) {
-            alert('Submit');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      onRuleFormSubmit() {
+        console.log('onRuleFormSubmit');
       },
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate(valid => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
-            alert('Submit');
+            alert('submit!');
           } else {
             console.log('error submit!!');
             return false;
           }
         });
       },
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleValidate(prop, errorMsg) {
-        console.log(prop, errorMsg);
-      },
-      onSubmit() {
-        console.log('submit!');
-      },
-      onRuleFormSubmit() {
-        console.log('onRuleFormSubmit');
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item)
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1)
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
-          key: this.dynamicForm.domains.length,
+        this.dynamicValidateForm.domains.push({
+          key: Date.now(),
           value: ''
         });
       }
@@ -218,7 +187,7 @@
       padding: 0;
       list-style: none;
 
-      &:after,&:before {
+      &:after, &:before {
         content: ' ';
         display: table;
       }
@@ -262,18 +231,12 @@
     .demo-ruleForm {
       width: 480px;
 
-      .el-input,
-      .el-textarea {
-        width: auto;
-      }
-
       .el-select .el-input {
         width: 360px;
       }
     }
     .demo-dynamic {
       .el-input {
-        display: inline-block;
         margin-right: 10px;
         width: 270px;
         vertical-align: top;
@@ -536,7 +499,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">
@@ -557,8 +520,8 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit">Create</el-button>
-    <el-button @click="handleReset">Reset</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
+    <el-button @click="resetForm('ruleForm')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -602,11 +565,8 @@ Form component allows you to verify your data, helping you find and correct erro
       };
     },
     methods: {
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -614,6 +574,9 @@ Form component allows you to verify your data, helping you find and correct erro
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -634,32 +597,33 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
   </el-form-item>
   <el-form-item label="Age" prop="age">
-    <el-input v-model="ruleForm2.age"></el-input>
+    <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit2">Submit</el-button>
-    <el-button @click="handleReset2">Reset</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
+    <el-button @click="resetForm('ruleForm2')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       var checkAge = (rule, value, callback) => {
-        var age = parseInt(value, 10);
-
+        if (!value) {
+          return callback(new Error('Please input the age'));
+        }
         setTimeout(() => {
-          if (!Number.isInteger(age)) {
+          if (!Number.isInteger(value)) {
             callback(new Error('Please input digits'));
-          } else{
-            if (age < 18) {
+          } else {
+            if (value < 18) {
               callback(new Error('Age must be greater than 18'));
             } else {
               callback();
             }
-          } 
+          }
         }, 1000);
       };
-      var validatePass = (rule, value, callback) => {
+      var validaePass = (rule, value, callback) => {
         if (value === '') {
           callback(new Error('Please input the password'));
         } else {
@@ -669,7 +633,7 @@ Form component allows you to verify your data, helping you find and correct erro
           callback();
         }
       };
-      var validatePass2 = (rule, value, callback) => {
+      var validaePass2 = (rule, value, callback) => {
         if (value === '') {
           callback(new Error('Please input the password again'));
         } else if (value !== this.ruleForm2.pass) {
@@ -686,26 +650,20 @@ Form component allows you to verify your data, helping you find and correct erro
         },
         rules2: {
           pass: [
-            { required: true, message: 'Please input the password', trigger: 'blur' },
-            { validator: validatePass }
+            { validator: validaePass, trigger: 'blur' }
           ],
           checkPass: [
-            { required: true, message: 'Please input the password again', trigger: 'blur' },
-            { validator: validatePass2 }
+            { validator: validaePass2, trigger: 'blur' }
           ],
           age: [
-            { required: true, message: 'Please input the age', trigger: 'blur' },
-            { validator: checkAge, trigger: 'change' }
+            { validator: checkAge, trigger: 'blur' }
           ]
         }
       };
     },
     methods: {
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -713,6 +671,9 @@ Form component allows you to verify your data, helping you find and correct erro
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -725,51 +686,50 @@ Form component allows you to verify your data, helping you find and correct erro
 :::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
 
 ```html
-<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="120px" class="demo-dynamic">
-  <el-form-item prop="email" label="Email">
-    <el-input v-model="dynamicForm.email"></el-input>
+<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
+  <el-form-item
+    prop="email"
+    label="Email"
+    :rules="[
+      { required: true, message: 'Please input email address', trigger: 'blur' },
+      { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
+    ]"
+  >
+    <el-input v-model="dynamicValidateForm.email"></el-input>
   </el-form-item>
   <el-form-item
-    v-for="(domain, index) in dynamicForm.domains"
+    v-for="(domain, index) in dynamicValidateForm.domains"
     :label="'Domain' + index"
     :key="domain.key"
-    :prop="'domains:' + index"
+    :prop="'domains.' + index + '.value'"
     :rules="{
-      type: 'object', required: true,
-      fields: {
-        value: { required: true, message: 'domain can not be null', trigger: 'blur' }
-      }
+      required: true, message: 'domain can not be null', trigger: 'blur'
     }"
   >
-    <el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">Delete</el-button>
+    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit3">Submit</el-button>
+    <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
     <el-button @click="addDomain">New domain</el-button>
+    <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       return {
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
             key: 1,
             value: ''
           }],
           email: ''
-        },
-        dynamicRule: {
-          email: [
-            { required: true, message: 'Please input email address', trigger: 'blur' },
-            { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
-          ]
         }
       };
     },
     methods: {
-      handleSubmit3(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -778,15 +738,18 @@ Form component allows you to verify your data, helping you find and correct erro
           }
         });
       },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item);
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1);
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
-          key: this.dynamicForm.domains.length,
+        this.dynamicValidateForm.domains.push({
+          key: Date.now(),
           value: ''
         });
       }
@@ -794,7 +757,56 @@ Form component allows you to verify your data, helping you find and correct erro
   }
 </script>
 ```
-::: 
+:::
+
+### Number Validate
+
+::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
+```html
+<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
+  <el-form-item
+    label="age"
+    prop="age"
+    :rules="[
+      { required: true, message: 'age is required'},
+      { type: 'number', message: 'age must be a number'}
+    ]"
+  >
+    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
+    <el-button @click="resetForm('numberValidateForm')">Reset</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+:::
 
 ### Form Attributes
 
@@ -809,11 +821,11 @@ Form component allows you to verify your data, helping you find and correct erro
 
 ### Form Methods
 
-| Method | Description |
-| ---- | ---- |
-| validate(cb) | the method to validate the whole form |
-| validateField(prop, cb) | the method to validate a certain form item |
-| resetFields | reset all the fields and remove validation result |
+| Method | Description | Parameters |
+| ---- | ---- | ---- |
+| validate | the method to validate the whole form | Function(callback: Function(boolean)) |
+| validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
+| resetFields | reset all the fields and remove validation result | — |
 
 ### Form-Item Attributes
 
@@ -823,7 +835,5 @@ Form component allows you to verify your data, helping you find and correct erro
 | label | label | string | — | — |
 | label-width | width of label, e.g. '50px' | string | — | — |
 | required | whether the field is required or not, will be determined by validation rules if omitted | string |  — | false |
-
-
-
-
+| rules | validation rules of form | object | — | — |
+| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |

examples/docs/en-US/i18n.md

@@ -26,23 +26,75 @@ 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')
   ]
 }
 ```
 
+## Compatible with `vue-i18n`
+
+Element is compatible with [vue-i18n](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier.
+
+```javascript
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+Vue.use(Element)
+
+Vue.config.lang = 'zh-cn'
+Vue.locale('zh-cn', zhLocale)
+Vue.locale('en', enLocale)
+```
+
+## Compatibility with other i18n plugins
+Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.
+
+```javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(Element, {
+  i18n: function (path, options) {
+    // ...
+  }
+})
+```
+
 Currently Element ships with the following languages:
 <ul class="language-list">
-  <li>Chinese (zh-CN)</li>
+  <li>Simplified Chinese (zh-CN)</li>
   <li>English (en)</li>
   <li>German (de)</li>
   <li>Portuguese (pt)</li>
+  <li>Spanish (es)</li>
+  <li>Danish (da)</li>
+  <li>French (fr)</li>
+  <li>Norwegian (nb-NO)</li>
+  <li>Traditional Chinese (zh-TW)</li>
+  <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>
+  <li>Bulgarian (bg)</li>
 </ul>
 
 If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.

examples/docs/en-US/input-number.md

@@ -96,6 +96,7 @@ Allows you to define incremental steps.
 |step | incremental step | number | — | 1 |
 |size | size of the component | string | large/small| — |
 |disabled| whether the component is disabled | boolean | — | false |
+|controls| whether to enable the control buttons | boolean | — | true |
 
 ### Events
 

examples/docs/en-US/input.md

@@ -28,6 +28,8 @@
         input8: '',
         input9: '',
         textarea: '',
+        textarea2: '',
+        textarea3: '',
         select: '',
         state1: '',
         state2: '',
@@ -83,71 +85,57 @@
 <style>
   .demo-input.demo-en-US {
     .el-select .el-input {
-      width: 120px;
-    }
-    .text {
-      font-size: 14px;
-      color: #8492a6;
+      width: 110px;
     }
     .el-input {
       width: 180px;
-
-      & + .el-input,
-      & + .el-textarea {
-        margin-top: 15px;
-      }
     }
     .el-textarea {
       width: 414px;
     }
     .el-input-group {
-      min-width: 260px;
-    }
-    .el-input-group + .el-input-group {
-      margin-top: 15px;
-    }
-    .el-autocomplete {
-      display: inline-block;
+      width: 100%;
     }
-    .inline-input {
+    .demo-input-size {
       .el-input {
-        display: inline-block;
         vertical-align: top;
-        margin: 10px 5px;
-      }
-      .el-autocomplete {
-        margin: 10px 0 0;
-
-        .el-input {
-          margin: 0;
-        }
+        margin: 0 10px 10px 0;
       }
     }
-    .tac {
+    .demo-autocomplete {
       text-align: center;
 
-      .el-autocomplete {
-        text-align: left;
+      .sub-title {
+        margin-bottom: 10px;
+        font-size: 14px;
+        color: #8492a6;
       }
-    }
-    .el-row.border-grid {
+
       .el-col:not(:last-child) {
         border-right: 1px solid rgba(224,230,237,0.50);
       }
+
+      .el-autocomplete {
+        text-align: left;
+      }
     }
-    .my-autocomplete {
-      li {
-        line-height: normal;
-        padding: 7px *;
-
-        .value {
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        .link {
-          font-size: 12px;
-          color: #b4b4b4;
-        }
+  }
+  .el-autocomplete__suggestions.my-autocomplete {
+    li {
+      line-height: normal;
+      padding: 7px *;
+
+      .name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .addr {
+        font-size: 12px;
+        color: #b4b4b4;
+      }
+
+      .highlighted .addr {
+        color: #ddd;
       }
     }
   }
@@ -162,10 +150,7 @@ Input data using mouse or keyboard.
 ::: demo
 
 ```html
-<el-input
-  placeholder="Please input"
-  v-model="input">
-</el-input>
+<el-input placeholder="Please input" v-model="input"></el-input>
 
 <script>
 export default {
@@ -235,14 +220,14 @@ export default {
 
 ### Textarea
 
-Resizable for entering multiple lines of text information.
+Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`.
 
-::: demo Add attribute `type="textarea"` to change `input` into native `textarea`.
+::: demo Control the height by setting the `rows` prop.
 
 ```html
 <el-input
   type="textarea"
-  :autosize="{ minRows: 2, maxRows: 4}"
+  :rows="2"
   placeholder="Please input"
   v-model="textarea">
 </el-input>
@@ -259,34 +244,72 @@ export default {
 ```
 :::
 
-### Mixed input
+### Autosize Textarea
 
-Prepend or append an element, generally a label or a button.
+Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust.
 
-::: demo Use `slot` to distribute elements that prepend or append to Input.
+::: demo
 
 ```html
-<el-input placeholder="Please input" v-model="input3">
-  <template slot="prepend">Http://</template>
-</el-input>
-<el-input placeholder="Please input" v-model="input4">
-  <template slot="append">.com</template>
+<el-input
+  type="textarea"
+  autosize
+  placeholder="Please input"
+  v-model="textarea2">
 </el-input>
-<el-input placeholder="Please input" v-model="input5" style="width: 300px;">
-  <el-select v-model="select" slot="prepend" placeholder="Select">
-    <el-option label="Restaurant" value="1"></el-option>
-    <el-option label="Order No." value="2"></el-option>
-    <el-option label="Tel" value="3"></el-option>
-  </el-select>
-  <el-button slot="append" icon="search"></el-button>
+<div style="margin: 20px 0;"></div>
+<el-input
+  type="textarea"
+  :autosize="{ minRows: 2, maxRows: 4}"
+  placeholder="Please input"
+  v-model="textarea3">
 </el-input>
 
-<style>
-.el-select .el-input {
-  width: 120px;
+<script>
+export default {
+  data() {
+    return {
+      textarea2: '',
+      textarea3: ''
+    }
+  }
 }
-</style>
+</script>
+```
+:::
+
+### Mixed input
+
+Prepend or append an element, generally a label or a button.
 
+::: demo Use `slot` to distribute elements that prepend or append to Input.
+
+```html
+<div>
+  <el-input placeholder="请输入内容" v-model="input3">
+    <template slot="prepend">Http://</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="请输入内容" v-model="input4">
+    <template slot="append">.com</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="请输入内容" v-model="input5">
+    <el-select v-model="select" slot="prepend" placeholder="请选择">
+      <el-option label="餐厅名" value="1"></el-option>
+      <el-option label="订单号" value="2"></el-option>
+      <el-option label="用户电话" value="3"></el-option>
+    </el-select>
+    <el-button slot="append" icon="search"></el-button>
+  </el-input>
+</div>
+<style>
+  .el-select .el-input {
+    width: 110px;
+  }
+</style>
 <script>
 export default {
   data() {
@@ -306,24 +329,24 @@ export default {
 
 ::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
 ```html
-<div class="inline-input">
+<div class="demo-input-size">
   <el-input
     size="large"
-    placeholder="Please input"
+    placeholder="请输入内容"
     v-model="input6">
   </el-input>
   <el-input
-    placeholder="Please input"
+    placeholder="请输入内容"
     v-model="input7">
   </el-input>
   <el-input
     size="small"
-    placeholder="Please input"
+    placeholder="请输入内容"
     v-model="input8">
   </el-input>
   <el-input
     size="mini"
-    placeholder="Please input"
+    placeholder="请输入内容"
     v-model="input9">
   </el-input>
 </div>
@@ -343,28 +366,30 @@ export default {
 ```
 :::
 
-### Auto complete
+### Autocomplete
 
 You can get some recommended tips based on the current input.
 
 ::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
 ```html
-<el-row class="inline-input border-grid">
-  <el-col :span="12" class="tac">
-    <div class="text">list suggestions when activated</div>
+<el-row class="demo-autocomplete">
+  <el-col :span="12">
+    <div class="sub-title">激活即列出输入建议</div>
     <el-autocomplete
+      class="inline-input"
       v-model="state1"
       :fetch-suggestions="querySearch"
-      placeholder="Please input"
+      placeholder="请输入内容"
       @select="handleSelect"
     ></el-autocomplete>
   </el-col>
-  <el-col :span="12" class="tac">
-    <div class="text">list suggestions on input</div>
+  <el-col :span="12">
+    <div class="sub-title">输入后匹配输入建议</div>
     <el-autocomplete
+      class="inline-input"
       v-model="state2"
       :fetch-suggestions="querySearch"
-      placeholder="Please input"
+      placeholder="请输入内容"
       :trigger-on-focus="false"
       @select="handleSelect"
     ></el-autocomplete>
@@ -421,7 +446,7 @@ Customize how suggestions are displayed.
 :::demo
 ```html
 <el-autocomplete
-  class="my-autocomplete"
+  popper-class="my-autocomplete"
   v-model="state3"
   :fetch-suggestions="querySearch"
   custom-item="my-item-en"
@@ -580,6 +605,7 @@ Search data from server-side.
 |name | same as `name` in native input | string | — | — |
 |max | same as `max` in native input | * | — | — |
 |min | same as `min` in native input | * | — | — |
+|resize| control the resizability | string | none, both, horizontal, vertical | — |
 |autofocus | same as `autofocus` in native input | boolean | — | false |
 |form | same as `form` in native input | string | — | — |
 
@@ -588,7 +614,10 @@ Search data from server-side.
 
 | Event Name | Description | Parameters |
 |----| ----| ----|
-|click | triggers when the icon inside Input is clicked | event object |
+|click | triggers when the icon inside Input is clicked | (event: Event) |
+| blur | triggers when the icon inside Input is blur | (event: Event) |
+| focus | triggers when the icon inside Input is focus | (event: Event) |
+| change | triggers when the icon inside Input value change | (value: string \| number) |
 
 ### Autocomplete Attributes
 
@@ -599,6 +628,8 @@ Attribute | Description | Type | Options | Default
 |value | binding value | string | — | — |
 |custom-item | component name of your customized suggestion list item | string | — | — |
 |fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
+| popper-class | custom class name for autocomplete's dropdown | string | — | — |
+| trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
 
 ### Autocomplete Events
 

examples/docs/en-US/installation.md

@@ -1,10 +1,10 @@
 ## Installation
 
 ### npm
-Installing with npm is recommended, for it works seamlessly with [webpack](https://webpack.js.org/).
+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
@@ -30,13 +30,13 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
 </head>
 <body>
   <div id="app">
-    <el-button @click.native="visible = true">Button</el-button>
+    <el-button @click="visible = true">Button</el-button>
     <el-dialog v-model="visible" title="Hello world">
       <p>Try Element</p>
     </el-dialog>
   </div>
 </body>
-  <!-- import Vue before Mint UI -->
+  <!-- import Vue before Element -->
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <!-- import JavaScript -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
@@ -50,4 +50,4 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
   </script>
 </html>
 ```
-If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
+If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.

examples/docs/en-US/layout.md

@@ -215,7 +215,7 @@ You can specify column offsets.
 
 ### Alignment
 
-Flexible alignment of columns.
+Use the flex layout to make flexible alignment of columns.
 
 ::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
 ```html
@@ -276,6 +276,40 @@ Flexible alignment of columns.
 ```
 :::
 
+### Responsive Layout
+
+Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.
+
+::: demo
+```html
+<el-row :gutter="10">
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
+```
+:::
+
 ### Row Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/en-US/loading.md

@@ -152,7 +152,7 @@ You can customize a text message.
 
 ### Full screen loading
 
-Show a full screen animation while loading data.  
+Show a full screen animation while loading data.
 
 :::demo Add the `fullscreen` modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier `lock`.
 
@@ -160,7 +160,7 @@ Show a full screen animation while loading data.
 <template>
   <el-button
     type="primary"
-    @click.native="openFullScreen"
+    @click="openFullScreen"
     v-loading.fullscreen.lock="fullscreenLoading">
     Full screen loading for 3 seconds
   </el-button>
@@ -189,17 +189,25 @@ Show a full screen animation while loading data.
 ### Service
 You can also invoke Loading with a service. Import Loading service:
 ```javascript
-import { LoadingService } from 'element-ui';
+import { Loading } from 'element-ui';
 ```
 Invoke it:
 ```javascript
-LoadingService(options);
+Loading.service(options);
 ```
 The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method:
 ```javascript
-let loadingInstance = LoadingService(options);
+let loadingInstance = Loading.service(options);
 loadingInstance.close();
 ```
+Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:
+```javascript
+let loadingInstance1 = Loading.service({ fullscreen: true });
+let loadingInstance2 = Loading.service({ fullscreen: true });
+console.log(loadingInstance1 === loadingInstance2); // true
+```
+Calling the `close` method on any one of them can close this full screen Loading.
+
 If Element is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.
 
 ### Options

examples/docs/en-US/menu.md

@@ -22,7 +22,7 @@ Menu that provides navigation for your website.
 
 Top bar NavMenu can be used in a variety of scenarios.
 
-::: demo
+::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu.
 ```html
 <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
@@ -32,7 +32,7 @@ Top bar NavMenu can be used in a variety of scenarios.
     <el-menu-item index="2-2">item two</el-menu-item>
     <el-menu-item index="2-3">item three</el-menu-item>
   </el-submenu>
-  <el-menu-item index="3">Orders</el-menu-item>
+  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
 </el-menu>
 <div class="line"></div>
 <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
@@ -43,7 +43,7 @@ Top bar NavMenu can be used in a variety of scenarios.
     <el-menu-item index="2-2">item two</el-menu-item>
     <el-menu-item index="2-3">item three</el-menu-item>
   </el-submenu>
-  <el-menu-item index="3">Orders </el-menu-item>
+  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
 </el-menu>
 
 <script>
@@ -62,7 +62,7 @@ Top bar NavMenu can be used in a variety of scenarios.
 
 Vertical NavMenu with sub-menus.
 
-::: demo
+::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
 ```html
 <el-row class="tac">
   <el-col :span="8">
@@ -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>

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

@@ -91,7 +91,7 @@ Alert interrupts user operation until the user confirms.
 
 ```html
 <template>
-  <el-button type="text" @click.native="open">Click to open the Message Box</el-button>
+  <el-button type="text" @click="open">Click to open the Message Box</el-button>
 </template>
 
 <script>
@@ -122,7 +122,7 @@ Confirm is used to ask users' confirmation.
 
 ```html
 <template>
-  <el-button type="text" @click.native="open2">Click to open the Message Box</el-button>
+  <el-button type="text" @click="open2">Click to open the Message Box</el-button>
 </template>
 
 <script>
@@ -160,7 +160,7 @@ Prompt is used when user input is required.
 
 ```html
 <template>
-  <el-button type="text" @click.native="open3">Click to open Message Box</el-button>
+  <el-button type="text" @click="open3">Click to open Message Box</el-button>
 </template>
 
 <script>
@@ -198,7 +198,7 @@ Can be customized to show various content.
 
 ```html
 <template>
-  <el-button type="text" @click.native="open4">Click to open Message Box</el-button>
+  <el-button type="text" @click="open4">Click to open Message Box</el-button>
 </template>
 
 <script>
@@ -244,7 +244,9 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title of the MessageBox | string | — | — |
 | message | content of the MessageBox | string | — | — |
-| type | message type, used for icon display | string | success/info/<br>warning/error | — |
+| type | message type, used for icon display | string | success/info/warning/error | — |
+| customClass | custom class name for MessageBox | string | — | — |
+| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel' | — | — |
 | lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
 | showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |
 | showConfirmButton | whether to show a confirm button | boolean | — | true |

examples/docs/en-US/message.md

@@ -69,7 +69,7 @@ Displays at the top, and disappears after 3 seconds.
 
 ```html
 <template>
-  <el-button :plain="true" @click.native="open">Show message</el-button>
+  <el-button :plain="true" @click="open">Show message</el-button>
 </template>
 
 <script>
@@ -91,10 +91,10 @@ Used to show the feedback of Success, Warning, Message and Error activities.
 :::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
 ```html
 <template>
-  <el-button :plain="true" @click.native="open2">success</el-button>
-  <el-button :plain="true" @click.native="open3">warning</el-button>
-  <el-button :plain="true" @click.native="open">message</el-button>
-  <el-button :plain="true" @click.native="open4">error</el-button>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open">message</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
@@ -133,10 +133,10 @@ A close button can be added.
 :::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
 ```html
 <template>
-  <el-button :plain="true" @click.native="open5">message</el-button>
-  <el-button :plain="true" @click.native="open6">success</el-button>
-  <el-button :plain="true" @click.native="open7">warning</el-button>
-  <el-button :plain="true" @click.native="open8">error</el-button>
+  <el-button :plain="true" @click="open5">message</el-button>
+  <el-button :plain="true" @click="open6">success</el-button>
+  <el-button :plain="true" @click="open7">warning</el-button>
+  <el-button :plain="true" @click="open8">error</el-button>
 </template>
 
 <script>
@@ -197,6 +197,8 @@ In this case you should call `Message(options)`. We have also registered methods
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | message | message text | string | — | — |
 | type | message type | string | success/warning/info/error | info |
+| iconClass | custom icon's class, overrides `type` | string | — | — |
+| customClass | custom class name for Message | string | — | — |
 | duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
 | showClose | whether to show a close button | boolean | — | false |
 | onClose | callback function when closed with the message instance as the parameter | function | — | — |

examples/docs/en-US/notification.md

@@ -2,9 +2,11 @@
   module.exports = {
     methods: {
       open() {
+        const h = this.$createElement;
+
         this.$notify({
           title: 'Title',
-          message: 'This is a reminder'
+          message: h('p', { style: 'color: red' }, 'This is a reminder')
         });
       },
 
@@ -46,6 +48,14 @@
         });
       },
 
+      open7() {
+        this.$notify.success({
+          title: 'Success',
+          message: 'This is a success message',
+          offset: 100
+        });
+      },
+
       onClose() {
         console.log('Notification is closed');
       }
@@ -53,24 +63,24 @@
   };
 </script>
 
-## Notification 
+## Notification
 
 Displays a global notification message at the upper right corner of the page.
 
 ### Basic usage
 
 ::: demo Element has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
-   
+
 ```html
 <template>
   <el-button
     plain
-    @click.native="open">
+    @click="open">
     Closes automatically
   </el-button>
   <el-button
     plain
-    @click.native="open2">
+    @click="open2">
     Won't close automatically
     </el-button>
 </template>
@@ -79,9 +89,11 @@ Displays a global notification message at the upper right corner of the page.
   export default {
     methods: {
       open() {
+        const h = this.$createElement;
+
         this.$notify({
           title: 'Title',
-          message: 'This is a reminder'
+          message: h('p', { style: 'color: red' }, 'This is a reminder')
         });
       },
 
@@ -107,22 +119,22 @@ We provide four types: success, warning, info and error.
 <template>
   <el-button
     plain
-    @click.native="open3">
+    @click="open3">
     Success
   </el-button>
   <el-button
     plain
-    @click.native="open4">
+    @click="open4">
     Warning
   </el-button>
   <el-button
     plain
-    @click.native="open5">
+    @click="open5">
     Info
   </el-button>
   <el-button
     plain
-    @click.native="open6">
+    @click="open6">
     Error
   </el-button>
 </template>
@@ -165,6 +177,35 @@ We provide four types: success, warning, info and error.
 ```
 :::
 
+### With offset
+
+Customize Notification's offset from the top edge of the screen
+
+::: demo Set the `offset` attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.
+```html
+<template>
+  <el-button
+      plain
+      @click="open7">
+    Notification with offset
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify.success({
+          title: 'Success',
+          message: 'This is a success message',
+          offset: 100
+        });
+      }
+    }
+  }
+</script>
+```
+
 ### Global method
 
 Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.
@@ -183,10 +224,13 @@ In this case you should call `Notification(options)`. We have also registered me
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title | string | — | — |
-| message | description text | string | — | — |
+| message | description text | string/Vue.VNode | — | — |
 | type | notification type | string | success/warning/info/error | — |
+| iconClass | custom icon's class. It will be overridden by `type` | string | — | — |
+| customClass | custom class name for Notification | string | — | — |
 | duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
 | onClose | callback function when closed | function | — | — |
+| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |
 
 ### Methods
 `Notification` and `this.$notify` returns the current Message instance. To manually close the instance, you can call `close` on it.

examples/docs/en-US/pagination.md

@@ -1,4 +1,4 @@
-## Pagination 
+## Pagination
 
 If you have too much data to display in one page, use pagination.
 
@@ -51,7 +51,7 @@ Add more modules based on your scenario.
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage1"
       :page-size="100"
       layout="total, prev, pager, next"
       :total="1000">
@@ -62,7 +62,7 @@ Add more modules based on your scenario.
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage2"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
       layout="sizes, prev, pager, next"
@@ -74,7 +74,7 @@ Add more modules based on your scenario.
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage3"
       :page-size="100"
       layout="prev, pager, next, jumper"
       :total="1000">
@@ -85,7 +85,7 @@ Add more modules based on your scenario.
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage4"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
       layout="total, sizes, prev, pager, next, jumper"
@@ -100,20 +100,39 @@ Add more modules based on your scenario.
         console.log(`${val} items per page`);
       },
       handleCurrentChange(val) {
+        this.currentPage = val;
         console.log(`current page: ${val}`);
       }
+    },
+    data() {
+      return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+      };
     }
   }
 </script>
 ```
 :::
 <script>
+  import { addClass } from 'element-ui/src/utils/dom';
   export default {
+    data() {
+      return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+      };
+    },
     methods: {
       handleSizeChange(val) {
         console.log(`${val} items per page`);
       },
       handleCurrentChange(val) {
+        this.currentPage = val;
         console.log(`current page: ${val}`);
       }
     },
@@ -122,8 +141,8 @@ Add more modules based on your scenario.
         let demos = document.querySelectorAll('.source');
         let firstDemo = demos[0];
         let lastDemo = demos[demos.length - 1];
-        firstDemo.classList.add('first');
-        lastDemo.classList.add('last');
+        addClass(firstDemo, 'first');
+        addClass(lastDemo, 'last');
       });
     }
   }
@@ -137,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
@@ -145,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` |

examples/docs/en-US/popover.md

@@ -185,8 +185,8 @@ Of course, you can nest other operations. It's more light-weight than using a di
   v-model="visible2">
   <p>Are you sure to delete this?</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click.native="visible2 = false">cancel</el-button>
-    <el-button type="primary" size="mini" @click.native="visible2 = false">confirm</el-button>
+    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
+    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
   </div>
 </el-popover>
 
@@ -212,6 +212,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
 |  content        |  popover content, can be replaced with a default `slot`    | string            | — | — |
 |  width        |  popover width  | string, number            | — | Min width 150px |
 |  placement        |  popover placement  | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+|  disabled       |  whether Popover is disabled  | boolean    | — |  false |
 |  value(v-model)        |  whether popover is visible  | Boolean           | — |  false |
 |  offset        |  popover offset  | number           | — |  0 |
 |  transition     |  popover transition animation      | string             | — | fade-in-linear |
@@ -225,3 +226,8 @@ Of course, you can nest other operations. It's more light-weight than using a di
 | — | text content of popover |
 | reference | HTML element that triggers popover |
 
+### Events
+| Event Name | Description | 回调参数 |
+|---------|--------|---------|
+| show | triggers when popover shows | — |
+| hide | triggers when popover hides | — |

examples/docs/en-US/quickstart.md

@@ -45,7 +45,7 @@ Typical configurations for these config files are:
   },
   "dependencies": {
     "element-ui": "^1.0.0",
-    "vue": "^2.0.5"
+    "vue": "^2.1.6"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
@@ -142,7 +142,7 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 import App from './App.vue'
 
-Vue.use(MintUI)
+Vue.use(ElementUI)
 
 new Vue({
   el: '#app',

examples/docs/en-US/radio.md

@@ -124,6 +124,8 @@ name | native 'name' attribute | string    |      —         |     —
  Attribute      | Description          | Type      | Accepted Values       | Default  
 ---- | ---- | ---- | ---- | ----
 size | the size of radio buttons | string | large/small | —
+fill  | border and background color when button is active | string   | — | #20a0ff   |
+text-color | font color when button is active | string   | — | #ffffff   |
 
 ### Radio-group Events
 

examples/docs/en-US/rate.md

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

examples/docs/en-US/select.md

@@ -62,6 +62,16 @@
           }]
         }],
         options4: [],
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
         cities: [{
           value: 'Beijing',
           label: 'Beijing'
@@ -87,9 +97,10 @@
         value4: '',
         value5: [],
         value6: '',
-        value7: [],
+        value7: '',
         value8: '',
         value9: [],
+        value10: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -569,24 +580,73 @@ Enter keywords and search data from server.
 ```
 :::
 
+### Create new items
+Create and select new items that are not included in select options
+:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
+```html
+<template>
+  <el-select
+    v-model="value10"
+    multiple
+    filterable
+    allow-create
+    placeholder="Choose tags for your article">
+    <el-option
+      v-for="item in options5"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
+        value10: []
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Select Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | multiple | whether multiple-select is activated | boolean | — | false |
 | disabled | whether Select is disabled | boolean | — | false |
+| size | size of Input | string | large/small/mini | — |
 | clearable | whether single select can be cleared | boolean | — | false |
+| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
 | name | the name attribute of select input | string | — | — |
 | placeholder | placeholder | string | — | Select |
 | filterable | whether Select is filterable | boolean | — | false |
+| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
 | filter-method | custom filter method | function | — | — |
 | remote | whether options are loaded from server | boolean | — | false |
 | remote-method | custom remote search method | function | — | — |
 | loading | whether Select is loading data from server | boolean | — | false |
+| loading-text | displayed text while loading data from server | string | — | Loading |
+| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
+| no-data-text | displayed text when there is no options | string | — | No data |
+| popper-class | custom class name for Select's dropdown | string | — | — |
 
 ### Select Events
 | Event Name | Description | Parameters |
 |---------|---------|---------|
 | change | triggers when the selected value changes | current selected value |
+| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
 
 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/en-US/slider.md

@@ -132,5 +132,5 @@ Set value via a input box.
 ## Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| change | triggers when the value changes | value after changing |
+| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |
 

examples/docs/en-US/steps.md

@@ -31,7 +31,7 @@ Simple step bar.
   <el-step title="Step 3"></el-step>
 </el-steps>
 
-<el-button style="margin-top: 12px;" @click.native="next">Next step</el-button>
+<el-button style="margin-top: 12px;" @click="next">Next step</el-button>
 
 <script>
   export default {
@@ -126,7 +126,7 @@ Vertical step bars.
 |---------- |-------- |---------- |-------------  |-------- |
 | title | step title | string | — | — |
 | description | step description | string | — | — |
-| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use <br> custom icons | string | — |
+| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons | string | — |
 
 ### Step Slot
 | Name | Description |

examples/docs/en-US/switch.md

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

examples/docs/en-US/table.md

@@ -104,12 +104,73 @@
           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: []
       };
     },
 
     methods: {
+      handleClick() {
+        console.log('click');
+      },
+
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
       handleSelectionChange(val) {
         this.multipleSelection = val;
       },
@@ -133,6 +194,10 @@
           return 'positive-row';
         }
         return '';
+      },
+
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
       }
     },
 
@@ -144,7 +209,7 @@
   };
 </script>
 
-## Table 
+## Table
 
 Display multiple data with similar format. You can sort, filter, compare your data in a table.
 
@@ -460,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.
 
@@ -503,20 +568,24 @@ When there are too many columns, you can fix some of them.
       width="120">
     </el-table-column>
     <el-table-column
-      inline-template
       fixed="right"
       label="Operations"
       width="120">
-      <span>
-        <el-button type="text" size="small">Detail</el-button>
+      <template scope="scope">
+        <el-button @click="handleClick" type="text" size="small">Detail</el-button>
         <el-button type="text" size="small">Edit</el-button>
-      </span>
+      </template>
     </el-table-column>
   </el-table>
 </template>
 
 <script>
   export default {
+    methods: {
+      handleClick() {
+        console.log('click');
+      }
+    },
     data() {
       return {
         tableData: [{
@@ -559,7 +628,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.
 
@@ -666,6 +735,240 @@ 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
+      fixed="right"
+      label="Operations"
+      width="120">
+      <template scope="scope">
+        <el-button
+          @click.native.prevent="deleteRow(scope.$index, tableData4)"
+          type="text"
+          size="small">
+          Remove
+        </el-button>
+      </template>
+    </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.
+
+:::demo Only need to place el-table-column inside a el-table-column, you can achieve group header.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    border
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column label="Delivery Info">
+      <el-table-column
+        prop="name"
+        label="Name"
+        width="120">
+      </el-table-column>
+      <el-table-column label="Address Info">
+        <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>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          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>
+```
+:::
+
 ### Single select
 
 Single row selection is supported.
@@ -738,24 +1041,22 @@ Single row selection is supported.
 
 You can also select multiple rows.
 
-:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `inline-template` and `show-overflow-tooltip`: when the attribute `inline-template` is set, you can use custom template inside `el-table-column`, and access current row data via `row`; by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell.
+:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `show-overflow-tooltip`: by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell.
 ```html
 <template>
   <el-table
     :data="tableData3"
     border
-    selection-mode="multiple"
     style="width: 100%"
     @selection-change="handleSelectionChange">
     <el-table-column
       type="selection"
-      width="50">
+      width="55">
     </el-table-column>
     <el-table-column
-      inline-template
       label="Date"
       width="120">
-      <div>{{ row.date }}</div>
+      <template scope="scope">{{ scope.row.date }}</template>
     </el-table-column>
     <el-table-column
       property="name"
@@ -821,13 +1122,15 @@ You can also select multiple rows.
 
 Sort the data to find or compare data quickly.
 
-:::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
+:::demo Set table attribute `default-sort-prop` and `default-sort-order` to determine default sort column and order. Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
 ```html
 <template>
   <el-table
     :data="tableData"
     border
-    style="width: 100%">
+    style="width: 100%"
+    default-sort-prop="date"
+    default-sort-order="descending">
     <el-table-column
       prop="date"
       label="Date"
@@ -912,9 +1215,12 @@ Filter the table to find desired data.
       label="Tag"
       width="100"
       :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
-      :filter-method="filterTag"
-      inline-template>
-      <el-tag :type="row.tag === 'Home' ? 'primary' : 'success'" close-transition>{{row.tag}}</el-tag>
+      :filter-method="filterTag">
+      <template scope="scope">
+        <el-tag
+          :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
+          close-transition>{{scope.row.tag}}</el-tag>
+      </template>
     </el-table-column>
   </el-table>
 </template>
@@ -959,17 +1265,198 @@ Filter the table to find desired data.
 ```
 :::
 
+### Custom column template
+
+Customize table column so it can be integrated with other components.
+:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Scoped slots is supported from `1.1`, `inline-template` still works, but it's not recommended).
+```html
+<template>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      width="180">
+      <template scope="scope">
+        <el-icon name="time"></el-icon>
+        <span style="margin-left: 10px">{{ scope.row.date }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      width="180">
+      <template scope="scope">
+        <el-popover trigger="hover" placement="top">
+          <p>Name: {{ scope.row.name }}</p>
+          <p>Addr: {{ scope.row.address }}</p>
+          <div slot="reference" class="name-wrapper">
+            <el-tag>{{ scope.row.name }}</el-tag>
+          </div>
+        </el-popover>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :context="_self"
+      label="Operations">
+      <template scope="scope">
+        <el-button
+          size="small"
+          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+        <el-button
+          size="small"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Expandable row
+
+When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.
+:::demo Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using `Scoped slot` in custom column templates.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%">
+    <el-table-column type="expand">
+      <template scope="props">
+        <p>State: {{ props.row.state }}</p>
+        <p>City: {{ props.row.city }}</p>
+        <p>Address: {{ props.row.address }}</p>
+        <p>Zip: {{ props.row.zip }}</p>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      prop="name">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          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>
+```
+:::
+
 ### Table Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | table data | array | — | — |
-| height | table's height. By default  | 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 |
+| show-header | whether table header is visible | boolean | — | true |
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
-| row-class-name | function that returns custom class names for a row | Function(row, index) | — | — |
-| row-key | Key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
+| current-row-key | key of current row, a set only prop | string,number | — | — |
+| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function(row, index)/String | — | — |
+| 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 |
+| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
+| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | |
+| default-sort-prop | set the `prop` of default sort column. | String | - | - |
+| default-sort-order | set the default sort order. You should set `default-sort-prop` before using this prop. | String | ascending, descending | ascending |
 
 ### Table Events
 | Event Name | Description | Parameters |
@@ -980,12 +1467,17 @@ Filter the table to find desired data.
 | 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 |
+| expand | triggers when user expands or collapses a row | row, expanded |
 
 ### Table Methods
-| Method | Description | Parameter |
+| Method | Description | Parameters |
 |------|--------|-------|
 | clearSelection | clear selection, might be useful when `reserve-selection` is on | selection |
 | toggleRowSelection | toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
@@ -993,8 +1485,9 @@ Filter the table to find desired data.
 ### Table-column Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| 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 | — |
+| 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). If set to `expand`, the column will display expand icon.  | string | selection/index/expand | — |
 | 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 | — | — |
@@ -1005,8 +1498,8 @@ Filter the table to find desired data.
 | resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
 | formatter | function that formats content | Function(row, column) | — | — |
 | show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
-| inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object, and current context can be accessed by `_self` in JSX. In this case you don't need to set `prop`. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), _self( context), store (table store) }` | — | — |
 | align | alignment | string | left/center/right | left |
+| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — |
 | class-name | class name of cells in the column | string | — | — |
 | selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — |
 | reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false |

examples/docs/en-US/tabs.md

@@ -2,7 +2,18 @@
   export default {
     data() {
       return {
-        activeName: 'first'
+        activeName: 'first',
+        activeName2: 'first',
+        tabs: [{
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content'
+        }, {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }],
+        tabIndex: 2
       }
     },
     methods: {
@@ -24,11 +35,11 @@ Divide data collections which are related yet belong to different types.
 
 Basic and concise tabs.
 
-:::demo Tabs provide a selective card functionality and it can be achieved by just using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, and you can write content in the label. In this example, we add a `active-name` attribute indicating the active card in `el-tabs`, which can take a `String` value. In the `el-tab-pane` you can set corresponding `name` attribute, and if there is no `name`, the default sequence is `1`/`2`/`3`/`4`. In this example, the selected card is card 2. If `name` is omitted, setting `active-name` to `2` can reach the same goal.
+:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute.
 
 ```html
 <template>
-  <el-tabs :active-name="activeName">
+  <el-tabs v-model="activeName" @tab-click="handleClick">
     <el-tab-pane label="User" name="first">User</el-tab-pane>
     <el-tab-pane label="Config" name="second">Config</el-tab-pane>
     <el-tab-pane label="Role" name="third">Role</el-tab-pane>
@@ -41,6 +52,11 @@ Basic and concise tabs.
       return {
         activeName: 'first'
       };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
     }
   };
 </script>
@@ -55,7 +71,7 @@ Tabs styled as cards.
 
 ```html
 <template>
-  <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
+  <el-tabs type="card" @tab-click="handleClick">
     <el-tab-pane label="User">User</el-tab-pane>
     <el-tab-pane label="Config">Config</el-tab-pane>
     <el-tab-pane label="Role">Role</el-tab-pane>
@@ -64,10 +80,12 @@ Tabs styled as cards.
 </template>
 <script>
   export default {
+    data() {
+      return {
+        activeName: 'first'
+      };
+    },
     methods: {
-      handleRemove(tab) {
-        console.log(tab);
-      },
       handleClick(tab, event) {
         console.log(tab, event);
       }
@@ -81,7 +99,7 @@ Tabs styled as cards.
 
 Closable tabs.
 
-:::demo You can set `closable` attribute in `el-tabs`. It accept `Boolean` and Tab will be closable when the boolean is `true`.
+:::demo You can set the closable attribute in el-tabs to make all tabs closable. Also, closable can be set in a tab panel to make that specific tab closable.
 
 ```html
 <template>
@@ -125,12 +143,31 @@ Border card tabs.
 
 :::
 
+### Custom Tab
+
+You can use named slot to customize the tab label content.
+
+:::demo
+```html
+<el-tabs type="border-card">
+  <el-tab-pane>
+    <span slot="label"><i class="el-icon-date"></i> Route</span>
+    Route
+  </el-tab-pane>
+  <el-tab-pane label="Config">Config</el-tab-pane>
+  <el-tab-pane label="Role">Role</el-tab-pane>
+  <el-tab-pane label="Task">Task</el-tab-pane>
+</el-tabs>
+```
+:::
+
 ### Tabs Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | type     | type of Tab | string   | card/border-card  |     —    |
 | closable  | whether Tab is closable | boolean   | — |  false  |
-| active-name  | name of the selected tab  | string   |  —  |  name of first tab |
+| active-name(deprecated)  | name of the selected tab  | string   |  —  |  name of first tab |
+| value  | name of the selected tab  | string   |  —  |  name of first tab |
 
 ### Tabs Events
 | Event Name | Description | Parameters |
@@ -142,4 +179,6 @@ Border card tabs.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
+| 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' |
+| closable  | whether Tab is closable | boolean   | — |  false  |

examples/docs/en-US/tag.md

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

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

@@ -144,12 +144,15 @@ Can pick an arbitrary time range.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | whether DatePicker is read only | boolean | — | false |
-| disabled | whether DatePicker is disabled | boolean | - | false |
-| editable | whether the input is editable | boolean | - | true |
+| disabled | whether DatePicker is disabled | boolean | — | false |
+| editable | whether the input is editable | boolean | — | true |
+| clearable | Whether to show clear button | 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
@@ -159,8 +162,16 @@ Can pick an arbitrary time range.
 | end | end time | string | — | 18:00 |
 | step | time step | string | — | 00:30 |
 | minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
+| maxTime | maximum time, any time after this time will be disabled | string | — | — |
 
 ### 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 | — | — |
+
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | triggers when input value changes | formatted value |
+

examples/docs/en-US/tooltip.md

@@ -113,12 +113,12 @@ Tooltip has 9 placements.
     .item {
       margin: 4px;
     }
-    
+
     .left .el-tooltip__popper,
     .right .el-tooltip__popper {
       padding: 8px 10px;
     }
-    
+
     .el-button {
       width: 110px;
     }
@@ -145,7 +145,7 @@ Tooltip has two themes: `dark` and `light`。
 
 ### More Content
 
-Display multiple lines of text and set their format. 
+Display multiple lines of text and set their format.
 
 :::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`.
 ```html
@@ -170,7 +170,7 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
 ```html
 <template>
   <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">
-    <el-button @click.native="disabled=true">click to close tooltip function</el-button>
+    <el-button @click="disabled = !disabled">click to {{disabled ? 'active' : 'close'}} tooltip function</el-button>
   </el-tooltip>
 </template>
 
@@ -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 | — | — |

examples/docs/en-US/tree.md

@@ -222,14 +222,17 @@ Used for node selection. In the following example, data for each layer is acquir
 | node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — |
 | props | configuration options, see the following table | object | — | — |
 | 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 |
-| default-expand-all | whether to expand all nodes by default | boolean | - | false |
+| 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-expand-keys | array of keys of initially expanded nodes | array | — | — |
+| default-expanded-keys | array of keys of initially expanded nodes | array | — | — |
 | show-checkbox | whether node is selectable | boolean | — | false |
 | check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false |
 | default-checked-keys | array of keys of initially checked nodes | array | — | — |
+| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — |
 
 ### props
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -241,13 +244,17 @@ Used for node selection. In the following example, data for each layer is acquir
 `Tree` has the following method, which returns the currently selected array of nodes.
 | Method      | Description    | Parameters     |
 |---------- |-------- |---------- |
-| 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.|
+| 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`. 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`. 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 |
 

examples/docs/en-US/upload.md

@@ -1,5 +1,10 @@
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleChange(file, fileList, event) {
         console.log(file, fileList, event);
@@ -37,12 +42,18 @@ Upload files by clicking or drag-and-drop
 <el-upload
   action="//jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
-  :on-remove="handleRemove">
+  :on-remove="handleRemove"
+  :default-file-list="fileList">
   <el-button size="small" type="primary">Click to upload</el-button>
   <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
 </el-upload>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
@@ -70,6 +81,7 @@ You can drag your file to a certain area to upload it.
   :on-remove="handleRemove"
   :on-success="handleSuccess"
   :on-error="handleError"
+  :default-file-list="fileList"
 >
   <i class="el-icon-upload"></i>
   <div class="el-dragger__text">Drop file here or <em>click to upload</em></div>
@@ -77,6 +89,11 @@ You can drag your file to a certain area to upload it.
 </el-upload>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
@@ -102,6 +119,7 @@ This mode is specifically for image uploading, and the thumbnail will display in
   :thumbnail-mode="true"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
+  :default-file-list="fileList"
 >
   <i class="el-icon-upload"></i>
   <div class="el-dragger__text">Drop file here or <em>click to upload</em></div>
@@ -109,6 +127,11 @@ This mode is specifically for image uploading, and the thumbnail will display in
 </el-upload>
 <script>
   export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
     methods: {
       handleRemove(file, fileList) {
         console.log(file, fileList);
@@ -138,8 +161,10 @@ 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 | — | []
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/alert.md

@@ -169,7 +169,7 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | **title** | 标题，**必选参数** | string | — | — |
 | type | 主题 | string | success/warning/info/error | info |
-| description | 辅助性文字 | string | — | — |
+| description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
 | closable | 是否可关闭 | boolean | — | true |
 | close-text | 关闭按钮自定义文本 | string | — | — |
 | show-icon | 是否显示图标 | boolean | — | false |

examples/docs/zh-CN/badge.md

@@ -137,3 +137,4 @@
 | value          | 显示值      | string, number          |          —             |    —     |
 | max          |  最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |
 | is-dot       | 小圆点    | boolean  |  —  |  false |
+| hidden | 隐藏 badge | boolean | — | false |

examples/docs/zh-CN/button.md

@@ -1,5 +1,5 @@
 <script>
-  import { addClass } from 'wind-dom/src/class';
+  import { addClass } from 'element-ui/src/utils/dom';
   export default {
     data() {
       return {
@@ -189,8 +189,9 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | 尺寸   | string  |   large,small,mini            |    —     |
 | type     | 类型   | string    |   primary,success,warning,danger,info,text |     —    |
-| plain     | 是否朴素按钮   | Boolean    | true,false | false   |
-| disabled  | 禁用    | boolean   | true, false   | false   |
+| plain     | 是否朴素按钮   | Boolean    | — | false   |
+| loading     | 是否加载中状态   | Boolean    | — | false   |
+| disabled  | 是否禁用状态    | boolean   | —   | false   |
 | icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
 | autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |
 | native-type | 原生 type 属性 | string | button,submit,reset | button |

examples/docs/zh-CN/carousel.md

@@ -0,0 +1,238 @@
+<script>
+  export default {
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+        demos[0].className += ' small';
+        demos[3].className += ' medium';
+      });
+    }
+  }
+</script>
+<style>
+  .demo-carousel .block {
+    padding: 30px;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  
+  .demo-carousel .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-carousel .el-carousel__container {
+    text-align: center;
+  }
+  
+  .demo-carousel .el-carousel__item {
+    h3 {
+      color: #fff;
+      font-size: 18px;
+      line-height: 300px;
+      margin: 0;
+    }
+    &:nth-child(2n) {
+      background-color: #99a9bf;
+    }
+    &:nth-child(2n+1) {
+      background-color: #d3dce6;
+    }
+  }
+  
+  .demo-carousel .small h3 {
+    font-size: 14px;
+    line-height: 150px;
+  }
+
+  .demo-carousel .medium h3 {
+    font-size: 14px;
+    line-height: 200px;
+  }
+</style>
+## Carousel 走马灯
+
+在有限空间内，循环播放同一类型的图片、文字等内容
+
+### 基础用法
+
+适用广泛的基础用法
+
+::: demo 结合使用`el-carousel`和`el-carousel-item`标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在`el-carousel-item`标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置`trigger`属性为`click`，可以达到点击触发的效果。
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">默认 Hover 指示器触发</span>
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in 4">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  <div class="block">
+    <span class="demonstration">Click 指示器触发</span>
+    <el-carousel trigger="click" height="150px">
+      <el-carousel-item v-for="item in 4">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+     background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+     background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### 指示器
+
+可以将指示器的显示位置设置在容器外部
+
+::: demo `indicator-position`属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为`outside`则会显示在外部；设置为`none`则不会显示指示器。
+```html
+<template>
+  <el-carousel indicator-position="outside">
+    <el-carousel-item v-for="item in 4">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### 切换箭头
+可以设置切换箭头的显示时机
+
+::: demo `arrow`属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将`arrow`设置为`always`，则会一直显示；设置为`never`，则会一直隐藏。
+```html
+<template>
+  <el-carousel :interval="5000" arrow="always">
+    <el-carousel-item v-for="item in 4">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### 卡片化
+当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格
+
+::: demo 将`type`属性设置为`card`即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。
+```html
+<template>
+  <el-carousel :interval="4000" type="card" height="200px">
+    <el-carousel-item v-for="item in 6">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Carousel Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | 走马灯的高度 | number | — | 300 |
+| initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number | — | 0 |
+| trigger | 指示器的触发方式 | string | click | — |
+| autoplay | 是否自动切换 | boolean | — | true |
+| interval | 自动切换的时间间隔，单位为毫秒 | number | — | 3000 |
+| indicator-position | 指示器的位置 | string | outside/none | — |
+| arrow | 切换箭头的显示时机 | string | always/hover/never | hover |
+| type | 走马灯的类型 | string | card | — |
+
+### Carousel Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|---------|---------|
+| change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引 |
+
+### Carousel Methods
+| 方法名      | 说明          | 参数 |
+|---------- |-------------- | -- |
+| setActiveItem | 手动切换幻灯片 | 需要切换的幻灯片的索引，从 0 开始；或相应 `el-carousel-item` 的 `name` 属性值 |
+| prev | 切换至上一张幻灯片 | — |
+| next | 切换至下一张幻灯片 | — |
+
+### Carousel-Item Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name | 幻灯片的名字，可用作 `setActiveItem` 的参数 | string | — | — |

examples/docs/zh-CN/checkbox.md

@@ -55,7 +55,7 @@
 ```
 :::
 
-## 禁用状态
+### 禁用状态
 
 多选框不可用状态。
 

examples/docs/zh-CN/collapse.md

@@ -0,0 +1,150 @@
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1'],
+        activeName: '1'
+      };
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      }
+    }
+  }
+</script>
+<style>
+  .demo-collapse {
+    .el-collapse-item__header {
+      .header-icon {
+        margin-left: 5px;
+      }
+    }
+  }
+</style>
+
+## Collapse 折叠面板
+
+通过折叠面板收纳内容区域
+
+### 基础用法
+
+可同时展开多个面板，面板之间不影响
+
+:::demo
+```html
+<el-collapse v-model="activeNames" @change="handleChange">
+  <el-collapse-item title="一致性 Consistency" name="1">
+    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+  </el-collapse-item>
+  <el-collapse-item title="反馈 Feedback" name="2">
+    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+  </el-collapse-item>
+  <el-collapse-item title="效率 Efficiency" name="3">
+    <div>简化流程：设计简洁直观的操作流程；</div>
+    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+  </el-collapse-item>
+  <el-collapse-item title="可控 Controllability" name="4">
+    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+  </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1']
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 手风琴效果
+
+每次只能展开一个面板
+
+:::demo 通过 `accordion` 属性来设置是否以手风琴模式显示。
+```html
+<el-collapse v-model="activeName" accordion>
+  <el-collapse-item title="一致性 Consistency" name="1">
+    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+  </el-collapse-item>
+  <el-collapse-item title="反馈 Feedback" name="2">
+    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+  </el-collapse-item>
+  <el-collapse-item title="效率 Efficiency" name="3">
+    <div>简化流程：设计简洁直观的操作流程；</div>
+    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+  </el-collapse-item>
+  <el-collapse-item title="可控 Controllability" name="4">
+    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+  </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 自定义面板标题
+
+除了可以通过 `title` 属性以外，还可以通过具名 `slot` 来实现自定义面板的标题内容，以实现增加图标等效果。
+
+:::demo
+```html
+<el-collapse accordion>
+  <el-collapse-item>
+    <template slot="title">
+      一致性 Consistency<i class="header-icon el-icon-information"></i>
+    </template>
+    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+  </el-collapse-item>
+  <el-collapse-item title="反馈 Feedback">
+    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+  </el-collapse-item>
+  <el-collapse-item title="效率 Efficiency">
+    <div>简化流程：设计简洁直观的操作流程；</div>
+    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+  </el-collapse-item>
+  <el-collapse-item title="可控 Controllability">
+    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+  </el-collapse-item>
+</el-collapse>
+```
+:::
+
+### Collapse Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| accordion | 是否手风琴模式 | boolean | — | false |
+| value | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string/array | — | — |
+
+### Collapse Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|---------|---------|
+| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array\|string) |
+
+### Collapse Item Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name | 唯一标志符 | string/number | — | — |
+| title | 面板标题 | string | — | — |

examples/docs/zh-CN/custom-theme.md

@@ -2,9 +2,9 @@
 Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面方法。
 
 ### 安装工具
-首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。
+首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
 ```shell
-npm i element-theme -D
+npm i element-theme -g
 ```
 
 安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
@@ -20,7 +20,7 @@ npm i https://github.com/ElementUI/theme-default -D
 主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。
 
 ```shell
-node_modules/.bin/et -i [可以自定义变量文件目录]
+et -i [可以自定义变量文件]
 
 > ✔ Generator variables file
 ```
@@ -51,9 +51,9 @@ node_modules/.bin/et -i [可以自定义变量文件目录]
 ```
 
 ### 编译主题
-保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数。
+保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名
 ```shell
-node_modules/.bin/et
+et
 
 > ✔ build theme font
 > ✔ build element theme
@@ -63,7 +63,7 @@ node_modules/.bin/et
 默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。
 
 ```javascript
-import './theme/index.css'
+import '../theme/index.css'
 import ElementUI from 'element-ui'
 import Vue from 'vue'
 

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

@@ -226,8 +226,7 @@
     <el-date-picker
       v-model="value6"
       type="daterange"
-      placeholder="选择日期范围"
-      style="width: 220px">
+      placeholder="选择日期范围">
     </el-date-picker>
   </div>
   <div class="block">
@@ -237,8 +236,7 @@
       type="daterange"
       align="right"
       placeholder="选择日期范围"
-      :picker-options="pickerOptions2"
-      style="width: 220px">
+      :picker-options="pickerOptions2">
     </el-date-picker>
   </div>
 </template>
@@ -287,22 +285,32 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | 完全只读 | boolean | — | false |
-| disabled | 禁用 | boolean | - | false |
-| editable | 文本框可输入 | boolean | - | true |
+| disabled | 禁用 | boolean | — | false |
+| editable | 文本框可输入 | boolean | — | true |
+| clearable | 是否显示清除按钮 | 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[] | - | - |
-| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
+| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
+| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
+| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | text | 标题文本 | string | — | — |
-| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
+| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
+
+### Events
+| 事件名称      | 说明    | 回调参数      |
+|---------|--------|---------|
+| change | 当 input 的值改变时触发，返回值和文本框一致 | 格式化后的值 |
+

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

@@ -53,7 +53,7 @@
         },
         value1: '',
         value2: '',
-        value3: new Date(),
+        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value4: '',
         value5: '',
         value6: '',
@@ -170,8 +170,7 @@
     <el-date-picker
       v-model="value3"
       type="datetimerange"
-      placeholder="选择时间范围"
-      style="width:350px">
+      placeholder="选择时间范围">
     </el-date-picker>
   </div>
   <div class="block">
@@ -181,8 +180,7 @@
       type="datetimerange"
       :picker-options="pickerOptions2"
       placeholder="选择时间范围"
-      align="right"
-      style="width:350px">
+      align="right">
     </el-date-picker>
   </div>
 </template>
@@ -218,7 +216,7 @@
             }
           }]
         },
-        value3: '',
+        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value4: ''
       };
     }
@@ -231,24 +229,33 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | 完全只读 | boolean | — | false |
-| disabled | 禁用 | boolean | - | false |
-| editable | 文本框可输入 | boolean | - | true |
+| disabled | 禁用 | boolean | — | false |
+| editable | 文本框可输入 | boolean | — | true |
+| clearable | 是否显示清除按钮 | 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[] | - | - |
-| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
+| 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 | — | — |
+
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value |
 
 

examples/docs/zh-CN/dialog.md

@@ -75,13 +75,13 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
 :::demo 需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。本例通过显式改变`v-model`的值来打开 Dialog，此外我们还为 Dialog 实例提供了`open`和`close`方法，可以通过调用它们来打开/关闭 Dialog。
 
 ```html
-<el-button type="text" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
+<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
 
 <el-dialog title="提示" v-model="dialogVisible" size="tiny">
   <span>这是一段信息</span>
   <span slot="footer" class="dialog-footer">
-    <el-button @click.native="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
   </span>
 </el-dialog>
 
@@ -104,7 +104,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 :::demo
 ```html
 <!-- Table -->
-<el-button type="text" @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
+<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
 
 <el-dialog title="收货地址" v-model="dialogTableVisible">
   <el-table :data="gridData">
@@ -115,7 +115,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 </el-dialog>
 
 <!-- Form -->
-<el-button type="text" @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
 
 <el-dialog title="收货地址" v-model="dialogFormVisible">
   <el-form :model="form">
@@ -130,8 +130,8 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
     </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
-    <el-button @click.native="dialogFormVisible = false">取 消</el-button>
-    <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
+    <el-button @click="dialogFormVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
   </div>
 </el-dialog>
 

examples/docs/zh-CN/dropdown.md

@@ -43,6 +43,9 @@
     methods: {
       handleClick() {
         alert('button click');
+      },
+      handleCommand(command) {
+        this.$message('click on item ' + command);
       }
     }
   }
@@ -147,6 +150,56 @@
 ```
 :::
 
+### 菜单隐藏方式
+
+可以`hide-on-click`属性来配置。
+
+:::demo 下拉菜单默认在点击菜单项后会被隐藏，将`hide-on-click`属性默认为`false`可以关闭此功能。
+```html
+<el-dropdown :hide-on-click="false">
+  <span class="el-dropdown-link">
+    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
+    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
+### 指令事件
+
+点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作
+
+:::demo
+```html
+<el-dropdown @command="handleCommand">
+  <span class="el-dropdown-link">
+    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
+    <el-dropdown-item command="b">狮子头</el-dropdown-item>
+    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
+    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
+    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+<script>
+  export default {
+    methods: {
+      handleCommand(command) {
+        this.$message('click on item ' + command);
+      }
+    }
+  }
+</script>
+```
+:::
 
 ### Dropdown Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
@@ -156,6 +209,7 @@
 | split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
 | menu-align    | 菜单水平对齐方向     | string          | start, end  | end |
 | trigger       | 触发下拉的行为     | string          | hover, click  | hover |
+| hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | — | true |
 
 ### Dropdown Events
 | 事件名称      | 说明    | 回调参数      |

examples/docs/zh-CN/form.md

@@ -2,13 +2,14 @@
   export default {
     data() {
       var checkAge = (rule, value, callback) => {
-        var age = parseInt(value, 10);
-
+        if (!value) {
+          return callback(new Error('年龄不能为空'));
+        }
         setTimeout(() => {
-          if (!Number.isInteger(age)) {
+          if (!Number.isInteger(value)) {
             callback(new Error('请输入数字值'));
-          } else{
-            if (age < 18) {
+          } else {
+            if (value < 18) {
               callback(new Error('必须年满18岁'));
             } else {
               callback();
@@ -82,8 +83,6 @@
           age: ''
         },
         formLabelWidth: '80px',
-        options: [
-        ],
         rules: {
           name: [
             { required: true, message: '请输入活动名称', trigger: 'blur' },
@@ -110,89 +109,54 @@
         },
         rules2: {
           pass: [
-            { required: true, message: '请输入密码', trigger: 'blur' },
-            { validator: validatePass }
+            { validator: validatePass, trigger: 'blur' }
           ],
           checkPass: [
-            { required: true, message: '请再次输入密码', trigger: 'blur' },
-            { validator: validatePass2 }
+            { validator: validatePass2, trigger: 'blur' }
           ],
           age: [
-            { required: true, message: '请填写年龄', trigger: 'blur' },
-            { validator: checkAge, trigger: 'change' }
+            { validator: checkAge, trigger: 'blur' }
           ]
         },
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
-            key: 1,
-            value: ''
+            value: '',
+            key: Date.now()
           }],
           email: ''
         },
-        dynamicRule: {
-          email: [
-            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
-          ]
+        numberValidateForm: {
+          age: ''
         }
       };
     },
     methods: {
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate(valid => {
-          if (valid) {
-            alert('申请已提交');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      onSubmit() {
+        console.log('submit!');
       },
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate(valid => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
-            alert('申请已提交');
+            alert('submit!');
           } else {
             console.log('error submit!!');
             return false;
           }
         });
       },
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleValidate(prop, errorMsg) {
-        console.log(prop, errorMsg);
-      },
-      onSubmit() {
-        console.log('submit!');
-      },
-      onRuleFormSubmit() {
-        console.log('onRuleFormSubmit');
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item)
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1)
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
-          key: this.dynamicForm.domains.length,
-          value: ''
+        this.dynamicValidateForm.domains.push({
+          value: '',
+          key: Date.now()
         });
       }
     }
@@ -218,7 +182,7 @@
       padding: 0;
       list-style: none;
 
-      &:after,&:before {
+      &:after, &:before {
         content: ' ';
         display: table;
       }
@@ -262,18 +226,12 @@
     .demo-ruleForm {
       width: 460px;
 
-      .el-input,
-      .el-textarea {
-        width: auto;
-      }
-
       .el-select .el-input {
         width: 360px;
       }
     }
     .demo-dynamic {
       .el-input {
-        display: inline-block;
         margin-right: 10px;
         width: 270px;
         vertical-align: top;
@@ -529,7 +487,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">
@@ -550,8 +508,8 @@
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit">立即创建</el-button>
-    <el-button @click="handleReset">重置</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+    <el-button @click="resetForm('ruleForm')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -595,11 +553,8 @@
       };
     },
     methods: {
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -607,6 +562,9 @@
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -626,24 +584,25 @@
     <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
   </el-form-item>
   <el-form-item label="年龄" prop="age">
-    <el-input v-model="ruleForm2.age"></el-input>
+    <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit2">提交</el-button>
-    <el-button @click="handleReset2">重置</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
+    <el-button @click="resetForm('ruleForm2')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       var checkAge = (rule, value, callback) => {
-        var age = parseInt(value, 10);
-
+        if (!value) {
+          return callback(new Error('年龄不能为空'));
+        }
         setTimeout(() => {
-          if (!Number.isInteger(age)) {
+          if (!Number.isInteger(value)) {
             callback(new Error('请输入数字值'));
-          } else{
-            if (age < 18) {
+          } else {
+            if (value < 18) {
               callback(new Error('必须年满18岁'));
             } else {
               callback();
@@ -678,26 +637,20 @@
         },
         rules2: {
           pass: [
-            { required: true, message: '请输入密码', trigger: 'blur' },
-            { validator: validatePass }
+            { validator: validatePass, trigger: 'blur' }
           ],
           checkPass: [
-            { required: true, message: '请再次输入密码', trigger: 'blur' },
-            { validator: validatePass2 }
+            { validator: validatePass2, trigger: 'blur' }
           ],
           age: [
-            { required: true, message: '请填写年龄', trigger: 'blur' },
-            { validator: checkAge, trigger: 'change' }
+            { validator: checkAge, trigger: 'blur' }
           ]
         }
       };
     },
     methods: {
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -705,6 +658,9 @@
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -716,51 +672,49 @@
 
 ::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
 ```html
-<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="100px" class="demo-dynamic">
-  <el-form-item prop="email" label="邮箱">
-    <el-input v-model="dynamicForm.email"></el-input>
+<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+  <el-form-item
+    prop="email"
+    label="邮箱"
+    :rules="[
+      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+    ]"
+  >
+    <el-input v-model="dynamicValidateForm.email"></el-input>
   </el-form-item>
   <el-form-item
-    v-for="(domain, index) in dynamicForm.domains"
+    v-for="(domain, index) in dynamicValidateForm.domains"
     :label="'域名' + index"
     :key="domain.key"
-    :prop="'domains:' + index"
+    :prop="'domains.' + index + '.value'"
     :rules="{
-      type: 'object', required: true,
-      fields: {
-        value: { required: true, message: '域名不能为空', trigger: 'blur' }
-      }
+      required: true, message: '域名不能为空', trigger: 'blur'
     }"
   >
-    <el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">删除</el-button>
+    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit3">提交</el-button>
+    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
     <el-button @click="addDomain">新增域名</el-button>
+    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       return {
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
-            key: 1,
             value: ''
           }],
           email: ''
-        },
-        dynamicRule: {
-          email: [
-            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
-          ]
         }
       };
     },
     methods: {
-      handleSubmit3(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -769,16 +723,19 @@
           }
         });
       },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item)
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1)
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
-          key: this.dynamicForm.domains.length,
-          value: ''
+        this.dynamicValidateForm.domains.push({
+          value: '',
+          key: Date.now()
         });
       }
     }
@@ -787,6 +744,55 @@
 ```
 :::
 
+### 数字类型验证
+
+::: demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。
+```html
+<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
+  <el-form-item
+    label="年龄"
+    prop="age"
+    :rules="[
+      { required: true, message: '年龄不能为空'},
+      { type: 'number', message: '年龄必须为数字值'}
+    ]"
+  >
+    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
+    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Form Attributes
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -800,11 +806,11 @@
 
 ### Form Methods
 
-| 方法名      | 说明          |
-|---------- |-------------- |
-| validate(cb) | 对整个表单进行校验的方法 |
-| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
-| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
+| 方法名      | 说明          | 参数
+|---------- |-------------- | --------------
+| validate | 对整个表单进行校验的方法 | Function(callback: Function(boolean))
+| validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string))
+| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | -
 
 ### Form-Item Attributes
 
@@ -814,3 +820,5 @@
 | label | 标签文本 | string | — | — |
 | label-width | 表单域标签的的宽度，例如 '50px' | string |       —       | — |
 | required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
+| rules    | 表单验证规则 | object | — | — |
+| error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |

examples/docs/zh-CN/i18n.md

@@ -38,23 +38,75 @@ 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')
   ]
 }
 ```
 
+## 兼容 `vue-i18n`
+
+Element 兼容 [vue-i18n](https://github.com/kazupon/vue-i18n)，搭配使用能更方便地实现多语言切换。
+
+```javascript
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+Vue.use(Element)
+
+Vue.config.lang = 'zh-cn'
+Vue.locale('zh-cn', zhLocale)
+Vue.locale('en', enLocale)
+```
+
+## 兼容其他 i18n 插件
+如果不使用 `vue-i18n`，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。
+
+```javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(Element, {
+  i18n: function (path, options) {
+    // ...
+  }
+})
+```
+
 目前 Element 内置了以下语言：
 <ul class="language-list">
-  <li>汉语（zh-CN）</li>
+  <li>简体中文（zh-CN）</li>
   <li>英语（en）</li>
   <li>德语（de）</li>
   <li>葡萄牙语（pt）</li>
+  <li>西班牙语（es）</li>
+  <li>丹麦语（da）</li>
+  <li>法语（fr）</li>
+  <li>挪威语（nb-NO）</li>
+  <li>繁体中文（zh-TW）</li>
+  <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>
+  <li>保加利亚语（bg）</li>
 </ul>
- 
+
 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。

examples/docs/zh-CN/input-number.md

@@ -101,6 +101,7 @@
 | step     | 计数器步长           | number   | — | 1 |
 | size     | 计数器尺寸           | string   | large, small | — |
 | disabled | 是否禁用计数器        | boolean | — | false |
+| controls | 是否使用控制按钮        | boolean | — | true |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |

examples/docs/zh-CN/input.md

@@ -28,6 +28,8 @@
         input8: '',
         input9: '',
         textarea: '',
+        textarea2: '',
+        textarea3: '',
         select: '',
         state1: '',
         state2: '',
@@ -126,73 +128,55 @@
     .el-select .el-input {
       width: 110px;
     }
-    .text {
-      font-size: 14px;
-      color: #8492a6;
-    }
     .el-input {
       width: 180px;
-
-      & + .el-input,
-      & + .el-textarea {
-        margin-top: 15px;
-      }
     }
     .el-textarea {
       width: 414px;
     }
     .el-input-group {
-      min-width: 260px;
-    }
-    .el-input-group + .el-input-group {
-      margin-top: 15px;
+      width: 100%;
     }
-    .el-autocomplete {
-      display: inline-block;
-    }
-    .inline-input {
+    .demo-input-size {
       .el-input {
-        display: inline-block;
         vertical-align: top;
-        margin: 10px 5px;
-      }
-      .el-autocomplete {
-        margin: 10px 0 0;
-
-        .el-input {
-          margin: 0;
-        }
+        margin: 0 10px 10px 0;
       }
     }
-    .tac {
+    .demo-autocomplete {
       text-align: center;
 
-      .el-autocomplete {
-        text-align: left;
+      .sub-title {
+        margin-bottom: 10px;
+        font-size: 14px;
+        color: #8492a6;
       }
-    }
-    .el-row.border-grid {
+
       .el-col:not(:last-child) {
         border-right: 1px solid rgba(224,230,237,0.50);
       }
+
+      .el-autocomplete {
+        text-align: left;
+      }
     }
-    .my-autocomplete {
-      li {
-        line-height: normal;
-        padding: 7px *;
-
-        .name {
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        .addr {
-          font-size: 12px;
-          color: #b4b4b4;
-        }
-
-        .highlighted .addr {
-          color: #ddd;
-        }
+  }
+  .el-autocomplete__suggestions.my-autocomplete {
+    li {
+      line-height: normal;
+      padding: 7px *;
+
+      .name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .addr {
+        font-size: 12px;
+        color: #b4b4b4;
+      }
+
+      .highlighted .addr {
+        color: #ddd;
       }
     }
   }
@@ -206,10 +190,7 @@
 
 ::: demo
 ```html
-<el-input
-  placeholder="请输入内容"
-  v-model="input">
-</el-input>
+<el-input v-model="input" placeholder="请输入内容"></el-input>
 
 <script>
 export default {
@@ -278,13 +259,13 @@ export default {
 
 ### 文本域
 
-可调整大小，用于输入多行文本信息
+用于输入多行文本信息，通过将 `type` 属性的值指定为 textarea。
 
-::: demo 通过将 `type` 属性的值指定为 textarea。
+::: demo 文本域高度可通过 `rows` 属性控制
 ```html
 <el-input
   type="textarea"
-  :autosize="{ minRows: 2, maxRows: 4}"
+  :rows="2"
   placeholder="请输入内容"
   v-model="textarea">
 </el-input>
@@ -301,20 +282,57 @@ export default {
 ```
 :::
 
+### 可自适应文本高度的文本域
+
+通过设置 `autosize` 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 `autosize` 还可以设定为一个对象，指定最小行数和最大行数。
+
+::: demo
+```html
+<el-input
+  type="textarea"
+  autosize
+  placeholder="请输入内容"
+  v-model="textarea2">
+</el-input>
+<div style="margin: 20px 0;"></div>
+<el-input
+  type="textarea"
+  :autosize="{ minRows: 2, maxRows: 4}"
+  placeholder="请输入内容"
+  v-model="textarea3">
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      textarea2: '',
+      textarea3: ''
+    }
+  }
+}
+</script>
+```
+:::
+
 ### 复合型输入框
 
 可前置或后置元素，一般为标签或按钮
 
 ::: demo 可通过 slot 来指定在 input 中前置或者后置内容。
 ```html
-<template>
+<div>
   <el-input placeholder="请输入内容" v-model="input3">
     <template slot="prepend">Http://</template>
   </el-input>
+</div>
+<div style="margin-top: 15px;">
   <el-input placeholder="请输入内容" v-model="input4">
     <template slot="append">.com</template>
   </el-input>
-  <el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="请输入内容" v-model="input5">
     <el-select v-model="select" slot="prepend" placeholder="请选择">
       <el-option label="餐厅名" value="1"></el-option>
       <el-option label="订单号" value="2"></el-option>
@@ -322,14 +340,12 @@ export default {
     </el-select>
     <el-button slot="append" icon="search"></el-button>
   </el-input>
-</template>
-
+</div>
 <style>
-.el-select .el-input {
-  width: 100px;
-}
+  .el-select .el-input {
+    width: 110px;
+  }
 </style>
-
 <script>
 export default {
   data() {
@@ -349,7 +365,7 @@ export default {
 
 ::: demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
 ```html
-<div class="inline-input">
+<div class="demo-input-size">
   <el-input
     size="large"
     placeholder="请输入内容"
@@ -392,19 +408,21 @@ export default {
 
 ::: demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
 ```html
-<el-row class="inline-input border-grid">
-  <el-col :span="12" class="tac">
-    <div class="text">激活即列出输入建议</div>
+<el-row class="demo-autocomplete">
+  <el-col :span="12">
+    <div class="sub-title">激活即列出输入建议</div>
     <el-autocomplete
+      class="inline-input"
       v-model="state1"
       :fetch-suggestions="querySearch"
       placeholder="请输入内容"
       @select="handleSelect"
     ></el-autocomplete>
   </el-col>
-  <el-col :span="12" class="tac">
-    <div class="text">输入后匹配输入建议</div>
+  <el-col :span="12">
+    <div class="sub-title">输入后匹配输入建议</div>
     <el-autocomplete
+      class="inline-input"
       v-model="state2"
       :fetch-suggestions="querySearch"
       placeholder="请输入内容"
@@ -505,7 +523,7 @@ export default {
 ::: demo
 ```html
 <el-autocomplete
-  class="my-autocomplete"
+  popper-class="my-autocomplete"
   v-model="state3"
   :fetch-suggestions="querySearch"
   custom-item="my-item-zh"
@@ -747,18 +765,20 @@ export default {
 | rows          | 输入框行数，只对 `type="textarea"` 有效  |  number | — |  2   |
 | autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean/object | — |  false   |
 | auto-complete | 原生属性，自动补全 | string | on, off | off |
-| name | 原生属性 | string | - | -|
-| max | 原生属性，设置最大值 | * | - | - |
-| min | 原生属性，设置最小值 | * | - | - |
+| name | 原生属性 | string | — | — |
+| max | 原生属性，设置最大值 | * | — | — |
+| min | 原生属性，设置最小值 | * | — | — |
+| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
 | autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
-| form | 原生属性 | string | - | - |
+| form | 原生属性 | string | — | — |
 
 ### Input Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
-| click | 点击 Input 内的图标时触发 | event |
-| blur | 在 Input 失去焦点时触发 | event |
-| focus | 在 Input 或得焦点时触发 | event |
+| click | 点击 Input 内的图标时触发 | (event: Event) |
+| blur | 在 Input 失去焦点时触发 | (event: Event) |
+| focus | 在 Input 或得焦点时触发 | (event: Event) |
+| change | 在 Input 值改变时触发 | (value: string \| number) |
 
 ### Autocomplete Attributes
 
@@ -769,6 +789,8 @@ export default {
 | value         | 必填值输入绑定值   | string  | — | — |
 | custom-item  | 通过该参数指定自定义的输入建议列表项的组件名 | string  | — | — |
 | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  | — | — |
+| popper-class | Autocomplete 下拉列表的类名 | string | — | — |
+| trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |
 
 ### Autocomplete Events
 | 事件名称 | 说明 | 回调参数 |

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
@@ -30,7 +30,7 @@ npm i element-ui -D
 </head>
 <body>
   <div id="app">
-    <el-button @click.native="visible = true">按钮</el-button>
+    <el-button @click="visible = true">按钮</el-button>
     <el-dialog v-model="visible" title="Hello world">
       <p>欢迎使用 Element</p>
     </el-dialog>
@@ -50,4 +50,4 @@ npm i element-ui -D
   </script>
 </html>
 ```
-如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
+如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。

examples/docs/zh-CN/layout.md

@@ -245,12 +245,12 @@
 
 ### 对齐方式
 
-对分栏进行灵活的对齐。
+通过 `flex` 布局来对分栏进行灵活的对齐。
 
 ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
 ```html
 <el-row type="flex" class="row-bg">
-  <el-col :span="6" :sm="8" :md="{span: 4, offset: 2}"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
@@ -306,6 +306,40 @@
 ```
 :::
 
+### 响应式布局
+
+参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：`xs` `sm` `md` `lg`。
+
+::: demo
+```html
+<el-row :gutter="10">
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
+```
+:::
+
 ### Row Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/zh-CN/loading.md

@@ -164,7 +164,7 @@
 <template>
   <el-button
     type="primary"
-    @click.native="openFullScreen"
+    @click="openFullScreen"
     v-loading.fullscreen.lock="fullscreenLoading">
     显示整页加载，3 秒后消失
   </el-button>
@@ -193,23 +193,31 @@
 ### 服务
 Loading 还可以以服务的方式调用。引入 Loading 服务：
 ```javascript
-import { LoadingService } from 'element-ui';
+import { Loading } from 'element-ui';
 ```
 在需要调用时：
 ```javascript
-LoadingService(options);
+Loading.service(options);
 ```
 其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
 ```javascript
-let loadingInstance = LoadingService(options);
+let loadingInstance = Loading.service(options);
 loadingInstance.close();
 ```
+需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
+```javascript
+let loadingInstance1 = Loading.service({ fullscreen: true });
+let loadingInstance2 = Loading.service({ fullscreen: true });
+console.log(loadingInstance1 === loadingInstance2); // true
+```
+此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。
+
 如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。
 
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；<br>若传入字符串，则会将其作为参数传入 `document.querySelector`<br>以获取到对应 DOM 节点 | object/string | — | document.body |
+| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body |
 | body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false |
 | fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
 | lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |

examples/docs/zh-CN/menu.md

@@ -52,7 +52,8 @@
 
 适用广泛的基础用法。
 
-::: demo
+::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。
+
 ```html
 <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">处理中心</el-menu-item>
@@ -62,7 +63,7 @@
     <el-menu-item index="2-2">选项2</el-menu-item>
     <el-menu-item index="2-3">选项3</el-menu-item>
   </el-submenu>
-  <el-menu-item index="3">订单管理</el-menu-item>
+  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
 </el-menu>
 <div class="line"></div>
 <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
@@ -73,7 +74,7 @@
     <el-menu-item index="2-2">选项2</el-menu-item>
     <el-menu-item index="2-3">选项3</el-menu-item>
   </el-submenu>
-  <el-menu-item index="3">订单管理</el-menu-item>
+  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
 </el-menu>
 
 <script>
@@ -92,7 +93,7 @@
 
 垂直菜单，可内嵌子菜单。
 
-::: demo
+::: demo 通过 `el-menu-item-group` 组件可以实现菜单进行分组，分组名可以通过 `title` 属性直接设定也可以通过具名 slot 来设定。
 ```html
 <el-row class="tac">
   <el-col :span="8">
@@ -100,13 +101,18 @@
     <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
       <el-submenu index="1">
         <template slot="title"><i class="el-icon-message"></i>导航一</template>
-        <el-menu-item-group title="分组一">
+        <el-menu-item-group>
+          <template slot="title">分组一</template>
           <el-menu-item index="1-1">选项1</el-menu-item>
           <el-menu-item index="1-2">选项2</el-menu-item>
         </el-menu-item-group>
         <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>
@@ -124,6 +130,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>
@@ -139,16 +149,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>

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

@@ -89,7 +89,7 @@
 :::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它默认会返回一个`Promise`对象便于进行后续操作的处理。若不确定浏览器是否支持`Promise`，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
 ```html
 <template>
-  <el-button type="text" @click.native="open">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
@@ -120,7 +120,7 @@
 
 ```html
 <template>
-  <el-button type="text" @click.native="open2">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open2">点击打开 Message Box</el-button>
 </template>
 
 <script>
@@ -157,7 +157,7 @@
 
 ```html
 <template>
-  <el-button type="text" @click.native="open3">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open3">点击打开 Message Box</el-button>
 </template>
 
 <script>
@@ -195,7 +195,7 @@
 
 ```html
 <template>
-  <el-button type="text" @click.native="open4">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open4">点击打开 Message Box</el-button>
 </template>
 
 <script>
@@ -241,7 +241,9 @@ import { MessageBox } from 'element-ui';
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | MessageBox 标题 | string | — | — |
 | message | MessageBox 消息正文内容 | string | — | — |
-| type | 消息类型，用于显示图标 | string | success/info/<br>warning/error | — |
+| type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
+| customClass | MessageBox 的自定义类名 | string | — | — |
+| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action)，action 的值为'confirm'或'cancel' | — | — |
 | lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
 | showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |
 | showConfirmButton | 是否显示确定按钮 | boolean | — | true |

examples/docs/zh-CN/message.md

@@ -69,7 +69,7 @@
 
 ```html
 <template>
-  <el-button :plain="true" @click.native="open">打开消息提示</el-button>
+  <el-button :plain="true" @click="open">打开消息提示</el-button>
 </template>
 
 <script>
@@ -91,10 +91,10 @@
 :::demo 当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置`type`字段可以定义不同的状态，默认为`info`。此时正文内容以`message`的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open4`那样直接调用。
 ```html
 <template>
-  <el-button :plain="true" @click.native="open2">成功</el-button>
-  <el-button :plain="true" @click.native="open3">警告</el-button>
-  <el-button :plain="true" @click.native="open">消息</el-button>
-  <el-button :plain="true" @click.native="open4">错误</el-button>
+  <el-button :plain="true" @click="open2">成功</el-button>
+  <el-button :plain="true" @click="open3">警告</el-button>
+  <el-button :plain="true" @click="open">消息</el-button>
+  <el-button :plain="true" @click="open4">错误</el-button>
 </template>
 
 <script>
@@ -133,10 +133,10 @@
 :::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
 ```html
 <template>
-  <el-button :plain="true" @click.native="open5">消息</el-button>
-  <el-button :plain="true" @click.native="open6">成功</el-button>
-  <el-button :plain="true" @click.native="open7">警告</el-button>
-  <el-button :plain="true" @click.native="open8">错误</el-button>
+  <el-button :plain="true" @click="open5">消息</el-button>
+  <el-button :plain="true" @click="open6">成功</el-button>
+  <el-button :plain="true" @click="open7">警告</el-button>
+  <el-button :plain="true" @click="open8">错误</el-button>
 </template>
 
 <script>
@@ -197,6 +197,8 @@ import { Message } from 'element-ui';
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | message | 消息文字 | string | — | — |
 | type | 主题 | string | success/warning/info/error | info |
+| iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
+| customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
 | showClose | 是否显示关闭按钮 | boolean | — | false |
 | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |

examples/docs/zh-CN/notification.md

@@ -2,9 +2,11 @@
   module.exports = {
     methods: {
       open() {
+        const h = this.$createElement;
+
         this.$notify({
           title: '标题名称',
-          message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
+          message: h('p', { style: 'color: red'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
         });
       },
 
@@ -46,6 +48,14 @@
         });
       },
 
+      open7() {
+        this.$notify.success({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          offset: 100
+        });
+      },
+
       onClose() {
         console.log('Notification 已关闭');
       }
@@ -66,12 +76,12 @@
 <template>
   <el-button
     plain
-    @click.native="open">
+    @click="open">
     可自动关闭
   </el-button>
   <el-button
     plain
-    @click.native="open2">
+    @click="open2">
     不会自动关闭
     </el-button>
 </template>
@@ -80,9 +90,11 @@
   export default {
     methods: {
       open() {
+        const h = this.$createElement;
+
         this.$notify({
           title: '标题名称',
-          message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
+          message: h('p', { style: 'color: red'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
         });
       },
 
@@ -108,22 +120,22 @@
 <template>
   <el-button
     plain
-    @click.native="open3">
+    @click="open3">
     成功
   </el-button>
   <el-button
     plain
-    @click.native="open4">
+    @click="open4">
     警告
   </el-button>
   <el-button
     plain
-    @click.native="open5">
+    @click="open5">
     消息
   </el-button>
   <el-button
     plain
-    @click.native="open6">
+    @click="open6">
     错误
   </el-button>
 </template>
@@ -166,6 +178,36 @@
 ```
 :::
 
+### 带有偏移
+
+让 Notification 偏移一些位置
+
+::: demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
+```html
+<template>
+  <el-button
+    plain
+    @click="open7">
+    偏移的消息
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify.success({
+          title: '成功',
+          message: '这是一条成功的提示消息',
+          offset: 100
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 全局方法
 
 Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
@@ -184,10 +226,13 @@ import { Notification } from 'element-ui';
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | 标题 | string | — | — |
-| message | 说明文字 | string | — | — |
+| message | 说明文字 | string/Vue.VNode | — | — |
 | type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
+| iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — |
+| customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
 | onClose | 关闭时的回调函数 | function | — | — |
+| offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |
 
 ### 方法
 调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。

examples/docs/zh-CN/pagination.md

@@ -51,7 +51,7 @@
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage1"
       :page-size="100"
       layout="total, prev, pager, next"
       :total="1000">
@@ -62,7 +62,7 @@
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage2"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
       layout="sizes, prev, pager, next"
@@ -74,7 +74,7 @@
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage3"
       :page-size="100"
       layout="prev, pager, next, jumper"
       :total="1000">
@@ -85,7 +85,7 @@
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="5"
+      :current-page="currentPage4"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
       layout="total, sizes, prev, pager, next, jumper"
@@ -100,24 +100,42 @@
         console.log(`每页 ${val} 条`);
       },
       handleCurrentChange(val) {
+        this.currentPage = val;
         console.log(`当前页: ${val}`);
       }
+    },
+    data() {
+      return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+      };
     }
   }
 </script>
 ```
 :::
 <script>
-  import { addClass } from 'wind-dom/src/class';
+  import { addClass } from 'element-ui/src/utils/dom';
   export default {
     methods: {
       handleSizeChange(val) {
+        this.currentPage = val;
         console.log(`每页 ${val} 条`);
       },
       handleCurrentChange(val) {
         console.log(`当前页: ${val}`);
       }
     },
+    data() {
+      return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+      };
+    },
     mounted() {
       this.$nextTick(() => {
         let demos = document.querySelectorAll('.source');
@@ -185,10 +203,10 @@
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 | small | 是否使用小型分页样式 | Boolean | — | false |
 | page-size | 每页显示条目个数 | Number | — | 10 |
-| total | 总条目数 | Number | — | - |
-| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | - |
+| 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
@@ -196,3 +214,8 @@
 |---------|--------|---------|
 | size-change | pageSize 改变时会触发 | 每页条数`size` |
 | current-change | currentPage 改变时会触发 | 当前页`currentPage` |
+
+### Slot
+| name | 说明 |
+|------|--------|
+| — | 自定义内容，需要在 `layout` 中列出 `slot` |

examples/docs/zh-CN/popover.md

@@ -126,7 +126,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   title="标题"
   width="200"
   trigger="hover"
-  content="这是一段容,这是一段容,这是一段容,这是一段容。">
+  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
 </el-popover>
 
 <el-popover
@@ -135,7 +135,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   title="标题"
   width="200"
   trigger="click"
-  content="这是一段容,这是一段容,这是一段容,这是一段容。">
+  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
 </el-popover>
 
 <el-button v-popover:popover1>hover 激活</el-button>
@@ -145,7 +145,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   title="标题"
   width="200"
   trigger="focus"
-  content="这是一段容,这是一段容,这是一段容,这是一段容。">
+  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
   <el-button slot="reference">focus 激活</el-button>
 </el-popover>
 ```
@@ -212,8 +212,8 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   v-model="visible2">
   <p>这是一段内容这是一段内容确定删除吗？</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click.native="visible2 = false">取消</el-button>
-    <el-button type="primary" size="mini" @click.native="visible2 = false">确定</el-button>
+    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
+    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
   </div>
 </el-popover>
 
@@ -239,15 +239,22 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 |  content        |  显示的内容，也可以通过 `slot` 传入 DOM   | String            | — | — |
 |  width        |  宽度  | String, Number            | — | 最小宽度 150px |
 |  placement        |  出现位置  | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+|  disabled       |  Popover 是否可用  | Boolean           | — |  false |
 |  value(v-model)        |  状态是否可见  | Boolean           | — |  false |
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | fade-in-linear |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
-| popper-class | 为 popper 添加类名 | String | - | -|
+| popper-class | 为 popper 添加类名 | String | — | — |
 
 ### Slot
 | 参数               | 说明                                                     |
 |--- | ---|
 | — | Popover 内嵌 HTML 文本 |
 | reference | 触发 Popover 显示的 HTML 元素 |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| show | 显示时触发 | — |
+| hide | 隐藏时触发 | — |

examples/docs/zh-CN/quickstart.md

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "element-ui": "^1.0.0",
-    "vue": "^2.0.5"
+    "vue": "^2.1.6"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

examples/docs/zh-CN/radio.md

@@ -127,6 +127,8 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | size     | Radio 按钮组尺寸   | string  | large, small  |    —     |
+| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
+| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |
 
 ### Radio-group Events
 | 事件名称 | 说明 | 回调参数 |

examples/docs/zh-CN/rate.md

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

examples/docs/zh-CN/select.md

@@ -62,6 +62,16 @@
           }]
         }],
         options4: [],
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
         cities: [{
           value: 'Beijing',
           label: '北京'
@@ -87,9 +97,10 @@
         value4: '',
         value5: [],
         value6: '',
-        value7: [],
+        value7: '',
         value8: '',
-        value9: [],
+        value9: '',
+        value10: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -117,7 +128,6 @@
 
 <style>
   .demo-select .el-select {
-    display: inline-block;
     width: 240px;
   }
 </style>
@@ -129,7 +139,6 @@
 ### 基础用法
 
 适用广泛的基础单选
-
 :::demo `v-model`的值为当前被选中的`el-option`的 value 属性值
 ```html
 <template>
@@ -499,7 +508,6 @@
 ### 远程搜索
 
 从服务器搜索数据，输入关键字进行查找
-
 :::demo 为了启用远程搜索，需要将`filterable`和`remote`设置为`true`，同时传入一个`remote-method`。`remote-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果`el-option`是通过`v-for`指令渲染出来的，此时需要为`el-option`添加`key`属性，且其值需具有唯一性，比如此例中的`item.value`。
 ```html
 <template>
@@ -573,24 +581,73 @@
 ```
 :::
 
+### 创建条目
+可以创建并选中选项中不存在的条目
+:::demo 使用`allow-create`属性即可通过在输入框中输入文字来创建新的条目。注意此时`filterable`必须为真。
+```html
+<template>
+  <el-select
+    v-model="value10"
+    multiple
+    filterable
+    allow-create
+    placeholder="请选择文章标签">
+    <el-option
+      v-for="item in options5"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
+        value10: []
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Select Attributes 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | multiple | 是否多选 | boolean | — | false |
 | disabled | 是否禁用 | boolean | — | false |
+| size | 输入框尺寸 | string | large/small/mini | — |
 | clearable | 单选时是否可以清空选项 | boolean | — | false |
+| multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
 | name | select input 的 name 属性 | string | — | — |
 | placeholder | 占位符 | string | — | 请选择 |
 | filterable | 是否可搜索 | boolean | — | false |
+| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
 | filter-method | 自定义过滤方法 | function | — | — |
 | remote | 是否为远程搜索 | boolean | — | false |
 | remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
+| loading-text | 远程加载时显示的文字 | string | — | 加载中 |
+| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
+| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
+| popper-class | Select 下拉框的类名 | string | — | — |
 
 ### Select Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|---------|---------|
 | change | 选中值发生变化时触发 | 目前的选中值 |
+| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
 
 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

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 | 值改变时触发 | 改变后的值 |
+| change | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） | 改变后的值 |

examples/docs/zh-CN/steps.md

@@ -29,7 +29,7 @@
   <el-step title="步骤 3"></el-step>
 </el-steps>
 
-<el-button style="margin-top: 12px;" @click.native="next">下一步</el-button>
+<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
 
 <script>
   export default {
@@ -120,7 +120,7 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | title | 标题 | string | — | — |
 | description | 描述性文字 | string | — | — |
-| icon | 图标 | Element Icon 提供的图标，如果要使用<br>自定义图标可以通过 slot 方式写入 | string | — |
+| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — |
 
 ### Step Slot
 | name | 说明  |

examples/docs/zh-CN/switch.md

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

examples/docs/zh-CN/table.md

@@ -55,6 +55,63 @@
           $positive: true
         }],
         tableData3: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }],
+        tableData4: [{
           date: '2016-05-03',
           name: '王小虎',
           province: '上海',
@@ -110,6 +167,18 @@
     },
 
     methods: {
+      handleClick() {
+        console.log('click');
+      },
+
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
+
       handleSelectionChange(val) {
         this.multipleSelection = val;
       },
@@ -133,6 +202,10 @@
           return 'positive-row';
         }
         return '';
+      },
+
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
       }
     },
 
@@ -152,6 +225,10 @@
   .el-table .positive-row {
     background: #e2f0e4;
   }
+
+  .demo-table .name-wrapper {
+    display: inline-block;
+  }
 </style>
 
 ## Table 表格
@@ -511,20 +588,25 @@
       width="120">
     </el-table-column>
     <el-table-column
-      inline-template
       fixed="right"
       label="操作"
       width="100">
-      <span>
-        <el-button type="text" size="small">查看</el-button>
+      <template scope="scope">
+        <el-button @click="handleClick" type="text" size="small">查看</el-button>
         <el-button type="text" size="small">编辑</el-button>
-      </span>
+      </template>
     </el-table-column>
   </el-table>
 </template>
 
 <script>
   export default {
+    methods: {
+      handleClick() {
+        console.log(1);
+      }
+    },
+
     data() {
       return {
         tableData: [{
@@ -670,6 +752,240 @@
 ```
 :::
 
+### 流体高度
+
+当数据量动态变化时，可以为 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
+      fixed="right"
+      label="操作"
+      width="120">
+      <template scope="scope">
+        <el-button
+          @click.native.prevent="deleteRow(scope.$index, tableData4)"
+          type="text"
+          size="small">
+          移除
+        </el-button>
+      </template>
+    </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>
+```
+:::
+
+### 多级表头
+
+数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
+
+:::demo 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    border
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="150">
+    </el-table-column>
+    <el-table-column label="配送信息">
+      <el-table-column
+        prop="name"
+        label="姓名"
+        width="120">
+      </el-table-column>
+      <el-table-column label="地址">
+        <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>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          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>
+```
+:::
+
 ### 单选
 
 选择单行数据时使用色块表示。
@@ -742,7 +1058,7 @@
 
 选择多行数据时使用 Checkbox。
 
-:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可。在本例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-overflow-tooltip`：设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`prop`属性的设置；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。
+:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。
 ```html
 <template>
   <el-table
@@ -752,13 +1068,12 @@
     @selection-change="handleSelectionChange">
     <el-table-column
       type="selection"
-      width="50">
+      width="55">
     </el-table-column>
     <el-table-column
-      inline-template
       label="日期"
       width="120">
-      <div>{{ row.date }}</div>
+      <template scope="scope">{{ scope.row.date }}</template>
     </el-table-column>
     <el-table-column
       prop="name"
@@ -824,13 +1139,16 @@
 
 对表格进行排序，可快速查找或对比数据。
 
-:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
+:::demo 可以通过表的`default-sort-prop`和`default-sort-order`属性设置默认的排序列和排序顺序。在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
 ```html
 <template>
   <el-table
     :data="tableData"
     border
-    style="width: 100%">
+    style="width: 100%"
+    default-sort-prop="date"
+    default-sort-order="descending"
+    >
     <el-table-column
       prop="date"
       label="日期"
@@ -915,9 +1233,12 @@
       label="标签"
       width="100"
       :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
-      :filter-method="filterTag"
-      inline-template>
-      <el-tag :type="row.tag === '家' ? 'primary' : 'success'" close-transition>{{row.tag}}</el-tag>
+      :filter-method="filterTag">
+      <template scope="scope">
+        <el-tag
+          :type="scope.row.tag === '家' ? 'primary' : 'success'"
+          close-transition>{{scope.row.tag}}</el-tag>
+      </template>
     </el-table-column>
   </el-table>
 </template>
@@ -962,17 +1283,204 @@
 ```
 :::
 
+### 自定义列模板
+
+自定义列的显示内容，可组合其他组件使用。
+:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。(`1.1` 后支持通过 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 自定义模板。之前的 `inline-template` 同样适用，但不推荐。)
+```html
+<template>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      label="日期"
+      width="180">
+      <template scope="scope">
+        <el-icon name="time"></el-icon>
+        <span style="margin-left: 10px">{{ scope.row.date }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="姓名"
+      width="180">
+      <template scope="scope">
+        <el-popover trigger="hover" placement="top">
+          <p>姓名: {{ scope.row.name }}</p>
+          <p>住址: {{ scope.row.address }}</p>
+          <div slot="reference" class="name-wrapper">
+            <el-tag>{{ scope.row.name }}</el-tag>
+          </div>
+        </el-popover>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作">
+      <template scope="scope">
+        <el-button
+          size="small"
+          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+        <el-button
+          size="small"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 展开行
+
+当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
+:::demo 通过设置 type="expand" 和 `Scoped slot` 可以开启展开行功能，`el-table-column` 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 `Scoped slot` 相同。
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%">
+    <el-table-column type="expand">
+      <template scope="props">
+        <p>省: {{ props.row.province }}</p>
+        <p>市: {{ props.row.city }}</p>
+        <p>住址: {{ props.row.detailAddress }}</p>
+        <p>邮编: {{ props.row.zip }}</p>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="日期"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="姓名"
+      prop="name">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          detailAddress: '金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Table Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | 显示的数据 | array | — | — |
-| height | table 的高度，默认高度为空，即自动高度，单位 px | string/number | — | — |
+| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。  | string/number | — | — |
 | stripe | 是否为斑马纹 table | boolean | — | false |
 | border | 是否带有纵向边框 | boolean | — | false |
 | fit | 列的宽度是否自撑开 | boolean | — | true |
+| show-header | 是否显示表头 | boolean | — | true |
 | highlight-current-row | 是否要高亮当前行 | boolean | — | false |
-| row-class-name | 行的 className 的回调。 | Function(row, index) | — | — |
+| current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
+| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function(row, index)/String | — | — |
+| 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 | — | 暂无数据 |
+| default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
+| expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
+| default-sort-prop | 默认的排序列的prop。| String | - | - |
+| default-sort-order | 设置默认的排序顺序。需要设置`default-sort-prop`才能使用。 | String | ascending, descending | ascending |
+
 
 ### Table Events
 | 事件名 | 说明 | 参数 |
@@ -983,9 +1491,14 @@
 | 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 |
+| expand | 当用户对某一行展开或者关闭的上会触发该事件 | row, expanded |
 
 ### Table Methods
 | 方法名 | 说明 | 参数 |
@@ -996,7 +1509,8 @@
 ### Table-column Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
+| type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 | string | selection/index/expand | — |
+| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
 | label | 显示的标题 | string | — | — |
 | prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
 | width | 对应列的宽度 | string | — | — |
@@ -1008,12 +1522,12 @@
 | resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
 | formatter | 用来格式化内容 | Function(row, column) | — | — |
 | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
-| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 prop 属性。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), _self(当前上下文), store(table store) }` 的信息。 | — | — |
-| align | 对齐方式 | String | left, center, right | left |
+| align | 对齐方式 | String | left/center/right | left |
+| header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | String | left/center/right | — |
 | class-name | 列的 className | string | — | — |
 | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
 | reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false |
 | filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |
 | filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
 | filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row) | — | — |
-| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |
+| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |

examples/docs/zh-CN/tabs.md

@@ -2,7 +2,18 @@
   export default {
     data() {
       return {
-        activeName: 'first'
+        activeName: 'second',
+        activeName2: 'first',
+        tabs: [{
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content'
+        }, {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }],
+        tabIndex: 2
       }
     },
     methods: {
@@ -15,18 +26,20 @@
     }
   }
 </script>
+
 ## Tabs 标签页
+
 分隔内容上有关联但属于不同类别的数据集合。
 
 ### 基础用法
 
 基础的、简洁的标签页。
 
-:::demo Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。例子选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
+:::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。
 
 ```html
 <template>
-  <el-tabs :active-name="activeName">
+  <el-tabs v-model="activeName" @tab-click="handleClick">
     <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
@@ -37,8 +50,13 @@
   export default {
     data() {
       return {
-        activeName: 'first'
+        activeName: 'second'
       };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
     }
   };
 </script>
@@ -49,23 +67,25 @@
 
 选项卡样式的标签页。
 
-:::demo 只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`。
+:::demo 只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。
 
 ```html
 <template>
-  <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
-    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
-    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
-    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
-    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
+    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
   </el-tabs>
 </template>
 <script>
   export default {
+    data() {
+      return {
+        activeName: 'first'
+      };
+    },
     methods: {
-      handleRemove(tab) {
-        console.log(tab);
-      },
       handleClick(tab, event) {
         console.log(tab, event);
       }
@@ -79,11 +99,11 @@
 
 可以关闭标签页。
 
-:::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
+:::demo 通过设置 `closable` 属性来打开 `Tabs` 的可关闭标签效果, `closable` 也可以设置在 `Tab Panel` 中实现部分标签页的可关闭效果。
 
 ```html
 <template>
-  <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
+  <el-tabs type="card" closable @tab-click="handleClick" @tab-remove="handleRemove">
     <el-tab-pane label="用户管理">用户管理</el-tab-pane>
     <el-tab-pane label="配置管理">配置管理</el-tab-pane>
     <el-tab-pane label="角色管理">角色管理</el-tab-pane>
@@ -120,12 +140,46 @@
 ```
 :::
 
+### 自定义标签页
+
+可以通过具名 `slot` 来实现自定义标签页的内容
+
+:::demo
+```html
+<el-tabs type="border-card">
+  <el-tab-pane>
+    <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
+    我的行程
+  </el-tab-pane>
+  <el-tab-pane label="消息中心">消息中心</el-tab-pane>
+  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+</el-tabs>
+```
+:::
+
+### 动态增加标签页
+
+展示如何通过触发器来动态增加标签页
+
+:::demo
+```html
+<div style="margin-bottom: 20px;">
+  <el-button size="small" @click="tabs.push({ name: 'Tab ' + ++tabIndex, title: 'new Tab', content: 'new Tab content' })">add tab</el-button>
+</div>
+<el-tabs type="card" closable>
+  <el-tab-pane v-for="(item, index) in tabs" :label="item.title" :name="item.name">{{item.content}}</el-tab-pane>
+</el-tabs>
+```
+:::
+
 ### Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | type     | 风格类型   | string   | card/border-card  |     —    |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
-| active-name  | 选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
+| active-name(deprecated)  | 选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
+| value  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 
 ### Tabs Events
 | 事件名称 | 说明 | 回调参数 |
@@ -137,4 +191,6 @@
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
+| disabled | 是否禁用 | boolean | — | false |
 | name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
+| closable  | 标签是否可关闭   | boolean   | — |  false  |

examples/docs/zh-CN/tag.md

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

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

@@ -137,7 +137,7 @@
   export default {
     data() {
       return {
-        value1: '14:30',
+        value1: '',
         value2: new Date(2016, 9, 10, 18, 40),
         value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',
@@ -151,13 +151,16 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | 完全只读 | boolean | — | false |
-| disabled | 禁用 | boolean | - | false |
-| editable | 文本框可输入 | boolean | - | true |
+| disabled | 禁用 | boolean | — | false |
+| editable | 文本框可输入 | boolean | — | true |
+| clearable | 是否显示清除按钮 | 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
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -166,9 +169,18 @@
 | end | 结束时间 | string | — | 18:00 |
 | step | 间隔时间 | string | — | 00:30 |
 | minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 |
+| maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | — |
 
 ### 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 | — | — |
+
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value |
+
+
 

examples/docs/zh-CN/tooltip.md

@@ -134,7 +134,7 @@
     .item {
       margin: 4px;
     }
-    
+
     .left .el-tooltip__popper,
     .right .el-tooltip__popper {
       padding: 8px 10px;
@@ -189,7 +189,7 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 ```html
 <template>
   <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
-    <el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
+    <el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
   </el-tooltip>
 </template>
 ```
@@ -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 | — | — |