[release] 1.0.8

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

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

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

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

 *2016-12-14*
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,25 @@
 ## 更新日志

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

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

 > A Vue.js 2.0 UI Toolkit for Web.

@@ -87,5 +89,78 @@ English documentation is brought to you by SwiftGG Translation Team. Our special
 If you find Element useful, you can buy us a cup of coffee
 <img width="650" src="http://fuss10.elemecdn.com/2/d0/ab1b8e5a1d96bcdcd6092ce0c66ecjpeg.jpeg" alt="">

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

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

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

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

 > ✔ Generator variables file
 ```
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -260,6 +260,7 @@ Picking a date range is supported.
 | 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
--- a/examples/docs/en-US/datetime-picker.md
+++ b/examples/docs/en-US/datetime-picker.md
@@ -215,6 +215,7 @@ Select date and time in one picker.
 | 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
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -113,6 +113,7 @@ Click the triggering element or hover on it.
 | size          | component size, refer to `Button` component     | string          | large, small, mini  |  —  |
 | menu-align    | horizontal alignment     | string          | start/end  | end |
 | trigger       | how to trigger     | string  |    hover/click  |  hover |
+| hide-on-click | whether to hide menu after clicking menu-item     | boolean          | -  | true |

 ### Dropdown Events
 | Event Name | Description | Parameters |
--- a/examples/docs/en-US/i18n.md
+++ b/examples/docs/en-US/i18n.md
@@ -58,6 +58,7 @@ Currently Element ships with the following languages:
  <li>Brazilian Portuguese (pt-br)</li>
  <li>Farsi (fa)</li>
  <li>Thai (th)</li>
+  <li>Indonesian (id)</li>
 </ul>

 If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.
--- a/examples/docs/en-US/installation.md
+++ b/examples/docs/en-US/installation.md
@@ -4,7 +4,7 @@
 Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).

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

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

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

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

 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -1380,11 +1380,12 @@ Customize table column so it can be integrated with other components.
 | cell-mouse-enter | triggers when hovering into a cell| row, column, cell, event |
 | cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event |
 | cell-click | triggers when clicking a cell | row, column, cell, event |
-| row-click | triggers when clicking a row | row, event |
+| row-click | triggers when clicking a row | row, event, column |
 | row-contextmenu | triggers when user right clicks on a row | row, event |
 | row-dblclick | triggers when double clicking a row | row, event |
 | header-click | triggers when clicking a column header | column, event |
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |
+| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |

 ### Table Methods
@@ -1398,6 +1399,7 @@ Customize table column so it can be integrated with other components.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1)  | string | selection/index | — |
 | label | column label | string | — | — |
+| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | - | - |
 | prop |  field name. You can also use its alias: `property` | string | — | — |
 | width | column width | string | — | — |
 | min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — |
--- a/examples/docs/en-US/tabs.md
+++ b/examples/docs/en-US/tabs.md
@@ -142,6 +142,6 @@ Border card tabs.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
-| label-content | render function for tab title | Function(h) | - | - |
+| label-content | render function for tab title | Function(h, tab:vueInstance) | - | - |
 | disabled | whether Tab is disabled | boolean | - | false |
 | name      | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -151,6 +151,7 @@ Can pick an arbitrary time range.
 | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | align | alignment | left/center/right | left |
+| popper-class | custom class name for TimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |

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

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

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

 > ✔ Generator variables file
 ```
--- a/examples/docs/zh-CN/date-picker.md
+++ b/examples/docs/zh-CN/date-picker.md
@@ -294,6 +294,7 @@
 | 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 |
+| popper-class | DatePicker 下拉框的类名 | string | — | — |
 |picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |

 ### Picker Options
--- a/examples/docs/zh-CN/datetime-picker.md
+++ b/examples/docs/zh-CN/datetime-picker.md
@@ -238,6 +238,7 @@
 | 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 |
+| popper-class | DateTimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    componentName: 'ElCheckbox',

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

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

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

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

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


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

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

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

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

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

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

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

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

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

      return {
+        popperClass: '',
        minTime: time.minTime,
        maxTime: time.maxTime,
        btnDisabled: isDisabled(time.minTime, time.maxTime),
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -3,7 +3,8 @@
    <div
      v-show="visible"
      :style="{ width: width + 'px' }"
-      class="el-picker-panel time-select">
+      class="el-picker-panel time-select"
+      :class="popperClass">
      <div class="el-picker-panel__content">
        <div class="time-select-item"
          v-for="item in items"
@@ -90,6 +91,7 @@

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 or

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

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

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

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

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

-# test
+## test
 make test

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

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

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

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

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

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

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

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

-# Options
+### Attributes

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

 # Development
 ```shell
--- a/packages/input/package.json
+++ b/packages/input/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-input",
+  "name": "element-input",
  "version": "1.0.1",
  "description": "A input component for Vue.",
  "main": "lib/index.js",
--- a/packages/loading/README.md
+++ b/packages/loading/README.md
@@ -0,0 +1,66 @@
+# element-loading
+> A element-loading component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-loading
+
+## Installation
+```shell
+npm i element-loading -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElLoading from 'element-loading'
+import 'element-theme-default/dist/loading.css'
+
+Vue.use(ElLoading)
+```
+
+### 服务
+Loading 还可以以服务的方式调用。引入 Loading 服务：
+
+在需要调用时：
+```javascript
+Loading.service(options);
+```
+其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
+```javascript
+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 对象或字符串；若传入字符串，则会将其作为参数传入 `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 |
+| text | 显示在加载图标下方的加载文案 | string | — | — |
+| customClass | Loading 的自定义类名 | string | — | — |
+
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/loading/package.json
+++ b/packages/loading/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-loading",
+  "name": "element-loading",
  "version": "0.0.0",
  "description": "A loading component for Vue.js.",
  "keywords": [
--- a/packages/menu/README.md
+++ b/packages/menu/README.md
@@ -0,0 +1,85 @@
+# element-menu
+> A element-menu component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-menu
+
+## Installation
+```shell
+npm i element-menu -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElMenu from 'element-menu'
+import 'element-theme-default/dist/menu.css'
+
+Vue.use(ElMenu)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import {
+  ElMenu,
+  ElMenuItem,
+  ElSubmenu,
+  ElMenuItemGroup
+} from 'element-menu'
+
+Vue.component('el-menu', ElMenu)
+Vue.component('el-menu', ElMenuItem)
+Vue.component('el-menu', ElSubmenu)
+Vue.component('el-menu', ElMenuItemGroup)
+```
+
+
+### Menu Attribute
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| mode     | 模式   | string  |   horizontal,vertical   | vertical |
+| theme     | 主题色   | string    | light,dark | light |
+| default-active | 当前激活菜单的 index | string    | — | — |
+| default-openeds | 当前打开的submenu的 key 数组 | Array    | — | — |
+| unique-opened  | 是否只保持一个子菜单的展开 | boolean   | — | false   |
+| menu-trigger  | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string   | — | hover   |
+| router  | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean   | — | false   |
+
+### Menu Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| select  | 菜单激活回调 | index: 选中菜单项的 indexPath: 选中菜单项的 index path  |
+| open  | SubMenu 展开的回调 | index: 打开的 subMenu 的 index， indexPath: 打开的 subMenu 的 index path  |
+| close  | SubMenu 收起的回调 | index: 收起的 subMenu 的 index， indexPath: 收起的 subMenu 的 index path  |
+
+### SubMenu Attribute
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| index     | 唯一标志   | string  | — | — |
+
+### Menu-Item Attribute
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| index     | 唯一标志   | string  | — | — |
+| route     | Vue Router 路径对象 | Object | — | — |
+
+### Menu-Group Attribute
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| title     | 分组标题   | string  | — | — |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/menu/package.json
+++ b/packages/menu/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "el-menu",
-  "version": "0.0.0",
+  "name": "element-menu",
+  "version": "1.0.0",
  "description": "A menu component for Vue.js.",
  "keywords": [
    "element",
--- a/packages/menu/src/menu-item-group.vue
+++ b/packages/menu/src/menu-item-group.vue
@@ -14,31 +14,26 @@
        paddingLeft: 20
      };
    },
-    methods: {
-      initPadding() {
-        var parent = this.$parent;
-        var level = 0;
-        var component = parent.$options.componentName;
-
-        while (component !== 'ElMenu') {
-          if (component === 'ElSubmenu') {
-            level++;
+    computed: {
+      levelPadding() {
+        let padding = 10;
+        let parent = this.$parent;
+        while (parent && parent.$options.componentName !== 'ElMenu') {
+          if (parent.$options.componentName === 'ElSubmenu') {
+            padding += 20;
          }
          parent = parent.$parent;
-          component = parent.$options.componentName;
        }
-        this.paddingLeft += level * 10;
+        padding === 10 && (padding = 20);
+        return padding;
      }
-    },
-    mounted() {
-      this.initPadding();
    }
  };
 </script>

 <template>
  <li class="el-menu-item-group">
-    <div class="el-menu-item-group__title" :style="{'padding-left': paddingLeft + 'px'}">
+    <div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
      <template v-if="!$slots.title">{{title}}</template>
      <slot v-else name="title"></slot>
    </div>
--- a/packages/menu/src/menu-item.vue
+++ b/packages/menu/src/menu-item.vue
@@ -1,3 +1,14 @@
+<template>
+  <li class="el-menu-item"
+    :style="paddingStyle"
+    @click="handleClick"
+    :class="{
+      'is-active': active,
+      'is-disabled': disabled
+    }">
+    <slot></slot>
+  </li>
+</template>
 <script>
  import Menu from './menu-mixin';
  module.exports = {
@@ -41,14 +52,3 @@
    }
  };
 </script>
-
-<template>
-  <li class="el-menu-item"
-    @click="handleClick"
-    :class="{
-      'is-active': active,
-      'is-disabled': disabled
-    }">
-    <slot></slot>
-  </li>
-</template>
--- a/packages/menu/src/menu-mixin.js
+++ b/packages/menu/src/menu-mixin.js
@@ -17,6 +17,19 @@ module.exports = {
        parent = parent.$parent;
      }
      return parent;
+    },
+    paddingStyle() {
+      if (this.rootMenu.mode !== 'vertical') return {};
+
+      let padding = 20;
+      let parent = this.$parent;
+      while (parent && parent.$options.componentName !== 'ElMenu') {
+        if (parent.$options.componentName === 'ElSubmenu') {
+          padding += 20;
+        }
+        parent = parent.$parent;
+      }
+      return {paddingLeft: padding + 'px'};
    }
  }
 };
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -6,14 +6,13 @@
      'is-opened': opened
    }"
  >
-    <div class="el-submenu__title" ref="submenu-title">
-
+    <div class="el-submenu__title" ref="submenu-title" :style="paddingStyle">
      <slot name="title"></slot>
      <i :class="{
-          'el-submenu__icon-arrow': true,
-          'el-icon-arrow-down': rootMenu.mode === 'vertical',
-          'el-icon-caret-bottom': rootMenu.mode === 'horizontal'
-        }">
+        'el-submenu__icon-arrow': true,
+        'el-icon-arrow-down': rootMenu.mode === 'vertical',
+        'el-icon-caret-bottom': rootMenu.mode === 'horizontal'
+      }">
      </i>
    </div>
    <transition :name="rootMenu.mode === 'horizontal' ? 'el-zoom-in-top' : ''">
--- a/packages/message-box/README.md
+++ b/packages/message-box/README.md
@@ -0,0 +1,71 @@
+# element-message-box
+> A element-message-box component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-message-box
+
+## Installation
+```shell
+npm i element-message-box -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElMessageBox from 'element-message-box'
+import 'element-theme-default/dist/message.css'
+
+Vue.use(ElMessageBox)
+```
+
+### 全局方法
+
+Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`。
+
+### 单独引用
+
+单独引入 `MessageBox`：
+
+```javascript
+import { MessageBox } from 'element-ui';
+```
+
+对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。
+
+### Options
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title | MessageBox 标题 | string | — | — |
+| message | MessageBox 消息正文内容 | string | — | — |
+| 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 |
+| cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |
+| confirmButtonText | 确定按钮的文本内容 | string | — | 确定 |
+| cancelButtonClass | 取消按钮的自定义类名 | string | — | — |
+| confirmButtonClass | 确定按钮的自定义类名 | string | — | — |
+| closeOnClickModal | 是否可通过点击遮罩关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |
+| closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | — | false |
+| showInput | 是否显示输入框 | boolean | — | false（以 prompt 方式调用时为 true）|
+| inputPlaceholder | 输入框的占位符 | string | — | — |
+| inputPattern | 输入框的校验表达式 | regexp | — | — |
+| inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |
+| inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/message-box/package.json
+++ b/packages/message-box/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-message-box",
+  "name": "element-message-box",
  "version": "0.0.0",
  "description": "A message-box component for Vue.js.",
  "keywords": [
--- a/packages/message/README.md
+++ b/packages/message/README.md
@@ -0,0 +1,54 @@
+# element-message
+> A element-message component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-message
+
+## Installation
+```shell
+npm i element-message -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElMessage from 'element-message'
+import 'element-theme-default/dist/message.css'
+
+Vue.use(ElMessage)
+```
+
+### 全局方法
+
+Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
+
+此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。
+
+### Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| message | 消息文字 | string | — | — |
+| type | 主题 | string | success/warning/info/error | info |
+| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
+| showClose | 是否显示关闭按钮 | boolean | — | false |
+| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
+
+### 方法
+调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
+| 方法名 | 说明 |
+| ---- | ---- |
+| close | 关闭当前的 Message |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/message/package.json
+++ b/packages/message/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-message",
+  "name": "element-message",
  "version": "0.0.0",
  "description": "A message component for Vue.js.",
  "keywords": [
--- a/packages/notification/README.md
+++ b/packages/notification/README.md
@@ -0,0 +1,63 @@
+# element-notification
+> A element-notification component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-notification
+
+## Installation
+```shell
+npm i element-notification -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElNotification from 'element-notification'
+import 'element-theme-default/dist/notification.css'
+
+Vue.use(ElNotification)
+```
+
+### 全局方法
+
+Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
+
+### 单独引用
+
+单独引入 Notification：
+
+```javascript
+import { Notification } from 'element-ui';
+```
+
+此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法，如 `Notification.success(options)`。
+
+### Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title | 标题 | string | — | — |
+| message | 说明文字 | string | — | — |
+| type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
+| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
+| onClose | 关闭时的回调函数 | function | — | — |
+| offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |
+
+### 方法
+调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
+| 方法名 | 说明 |
+| ---- | ---- |
+| close | 关闭当前的 Notification |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/notification/package.json
+++ b/packages/notification/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-notification",
+  "name": "element-notification",
  "version": "0.0.0",
  "description": "A notification component for Vue.js.",
  "keywords": [
--- a/packages/pagination/README.md
+++ b/packages/pagination/README.md
@@ -1 +1,59 @@
-## el-pagination
+# element-pagination
+> A element-pagination component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-pagination
+
+## Installation
+```shell
+npm i element-pagination -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElPagination from 'element-pagination'
+import 'element-theme-default/dist/pagination.css'
+
+Vue.use(ElPagination)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import ElPagination from 'element-pagination'
+
+Vue.component('el-pagination', ElPagination)
+```
+
+### Attributes
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| small | 是否使用小型分页样式 | Boolean | — | false |
+| page-size | 每页显示条目个数 | Number | — | 10 |
+| 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'  |
+| page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| size-change | pageSize 改变时会触发 | 每页条数`size` |
+| current-change | currentPage 改变时会触发 | 当前页`currentPage` |
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/packages/pagination/package.json
+++ b/packages/pagination/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "el-pagination",
+  "name": "element-pagination",
  "version": "0.0.0",
  "description": "A pagination component for Vue.js.",
  "keywords": [
--- a/packages/pagination/src/pagination.js
+++ b/packages/pagination/src/pagination.js
@@ -55,7 +55,7 @@ export default {
      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange }></pager>,
      next: <next></next>,
      sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
-      slot: <slot></slot>,
+      slot: <my-slot></my-slot>,
      total: <total></total>
    };
    const components = layout.split(',').map((item) => item.trim());
@@ -87,6 +87,15 @@ export default {
  },

  components: {
+    MySlot: {
+      render(h) {
+        return (
+          this.$parent.$slots.default
+          ? this.$parent.$slots.default[0]
+          : ''
+        );
+      }
+    },
    Prev: {
      render(h) {
        return (
--- a/packages/popover/README.md
+++ b/packages/popover/README.md
@@ -0,0 +1,71 @@
+# element-popover
+> A element-popover component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-popover
+
+## Installation
+```shell
+npm i element-popover -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElPopover from 'element-popover'
+import 'element-theme-default/dist/popover.css'
+
+Vue.use(ElPopover)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import ElPopover from 'element-popover'
+
+Vue.component('el-popover', ElPopover)
+```
+
+
+### Attributes
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| trigger | 触发方式 | String  | click/focus/hover/manual |    click    |
+|  title              | 标题 | String | — | — |
+|  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 |
+|  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 | - | -|
+
+### Slot
+| 参数               | 说明                                                     |
+|--- | ---|
+| — | Popover 内嵌 HTML 文本 |
+| reference | 触发 Popover 显示的 HTML 元素 |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| show | 显示时触发 | — |
+| hide | 隐藏时触发 | — |
+
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Leopoldthecoder	51fab8641f	[release] 1.0.8	2016-12-20 19:01:14 +08:00
Leopoldthecoder	3d3bd7dc09	[build] 1.0.8	2016-12-20 19:01:14 +08:00
Leopoldthecoder	64667a4e8e	update changelog	2016-12-20 18:56:49 +08:00
baiyaaaaa	c69e30e8c1	fix popover test	2016-12-20 18:54:50 +08:00
baiyaaaaa	d2f852a320	add dropdown hide-on-click prop	2016-12-20 18:54:50 +08:00
Leopoldthecoder	98d3905ce9	Changelog: update for 1.0.8	2016-12-20 18:38:49 +08:00
Furybean	a0187d1aba	Table: add filter change event & add column-key for column.	2016-12-20 18:37:31 +08:00
杨奕	f14628254a	add popper-class for DatePicker, Select and Tooltip (#1806 )	2016-12-20 16:38:47 +08:00
杨奕	b158e124da	update anchor (#1829 )	2016-12-20 16:38:21 +08:00
杨奕	5027e86d4f	update bootstrap (#1858 )	2016-12-20 15:26:54 +08:00
杨奕	208891d173	Dialog: fix z-index of non-modal dialogs (#1866 )	2016-12-20 15:26:28 +08:00
baiyaaaaa	076d4303f7	add param to label-content render function	2016-12-20 15:18:10 +08:00
Yuyang Liu	3a774939ef	fix #1827	2016-12-20 14:21:16 +08:00
baiyaaaaa	15e74b6e7d	fix checkbox isGroup bug in computed cached (#1860 )	2016-12-20 14:18:46 +08:00
baiyaaaaa	1db8dc6588	Revert "fix form validate callback params" (#1864 ) This reverts commit `87b13bf0e0`.	2016-12-20 14:17:53 +08:00
杨奕	3a14efeed0	update OpenCollective	2016-12-20 11:51:52 +08:00
JeOam	65aaee6353	fix typo in clickoutside.js (#1848 )	2016-12-20 11:34:16 +08:00
杨奕	ead186153f	Pagination: fix slot (#1846 )	2016-12-20 11:20:57 +08:00
baiyaaaaa	4fa158eb32	add suport for mutil level submenu	2016-12-20 11:06:45 +08:00
baiyaaaaa	e7e104df5d	fix form validate callback params	2016-12-20 11:05:42 +08:00
杨奕	7e6128660c	Add OpenCollective badges	2016-12-20 10:34:10 +08:00
杨奕	1c24a2b294	Switch: update style (#1803 )	2016-12-20 09:18:52 +08:00
杨奕	240fda5af8	Select: add visible-change event (#1849 )	2016-12-20 09:11:10 +08:00
cinwell.li	8712d9f222	Doc: fix custom theme, fixed #1828 (#1837 )	2016-12-20 00:46:29 +08:00
qingwei.li	a915f8a5bb	DatePicker: fix set value, fixed #1773	2016-12-19 15:46:12 +08:00
FuryBean	40f9d83f87	Tree: add expand-on-click-node prop. (#1805 )	2016-12-19 15:38:51 +08:00
baiyaaaaa	1ba0745f00	fix input line-height (#1825 )	2016-12-19 11:16:47 +08:00
baiyaaaaa	4b20374bf1	support use checkbox without transport value	2016-12-19 10:14:48 +08:00
杨奕	217bb5c953	Loading: update spinner animation, fixed #1786 (#1817 )	2016-12-18 21:34:55 +08:00
杨奕	92742dc56a	Select: fix a dropdown update bug (#1784 )	2016-12-18 21:24:02 +08:00
杨奕	8123ee1c48	Slider: fix change event (#1810 )	2016-12-18 21:20:27 +08:00
Adam	71a3b5ad2f	Tag: Fix text wrap (#1785 ) When the width of parent container is too narrow, text in tag will be break into lines. 當父容器寬度不足時，Tag 文字會產生換行的現象	2016-12-18 21:19:03 +08:00
jingsam	2144c02bd3	Update installation.md	2016-12-18 19:48:58 +08:00
FuryBean	6c4f8a6867	Tree: add current-change event & current-node-key. (#1807 )	2016-12-17 14:09:05 +08:00
FuryBean	4614990cb4	Table: add column as third parameter for row-click event. (#1808 )	2016-12-17 14:00:35 +08:00
Rizqy H	12d43adeb3	Add Indonesian translation	2016-12-16 11:01:32 +08:00
baiyaaaaa	a5bdd2cabb	component README update and fix	2016-12-16 10:57:54 +08:00
baiyaaaaa	47c62e9fe0	add progress hook function property (#1782 )	2016-12-15 23:49:29 +08:00
cinwell.li	9f0774813f	Add yarn.lock (#1747 ) * Add yarn.lock * Update travis config * Use yarnpkg registry	2016-12-15 20:42:55 +08:00
cinwell.li	7d6f3606b4	DatePicker: fix datetimerange, fixed #1758 (#1766 )	2016-12-15 18:39:14 +08:00
cinwell.li	6d2f68b24c	Popup: prevent click event bubbles, fixed #1677 (#1754 )	2016-12-15 12:50:08 +08:00
baiyaaaaa	5e692418ff	fix the tab bar dynamic bug	2016-12-15 10:21:09 +08:00