[release] 1.0.2

[build] 1.0.2
Merge branch 'dev' of github.com:ElemeFE/element into dev
2025-12-16 11:44:01 +08:00 · 2016-11-18 20:08:56 +08:00 · 2016-11-18 20:08:55 +08:00 · 2016-11-18 20:04:54 +08:00 · 2016-11-18 20:03:20 +08:00 · 2016-11-18 20:03:20 +08:00
72 changed files with 1664 additions and 228 deletions
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -26,6 +26,8 @@ Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡

 - 提交 PR 前请 rebase，确保 commit 记录的整洁。

+- 确保 PR 是提交到 `dev` 分支，而不是 `master` 分支。
+
 - 如果是修复 bug，请在 PR 中给出描述信息。

 - 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,5 +1,6 @@
 Please makes sure these boxes are checked before submitting your PR, thank you!

 * [ ] Make sure you follow Element's [Contributing Guide](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md).
+* [ ] Make sure you are merging your commits to `dev` branch.
 * [ ] Rebase before creating a PR to keep commit history clear.
 * [ ] Add some descriptions and refer relative issues for you PR.
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,21 @@
 ## Changelog

+### 1.0.2
+
+*2016-11-18*
+
+- Added `context` for Table to specify which context to access inside of table columns, #1161
+- Added multiple languages
+- Fixed language's dynamic switching issue, #1160
+- Added `render-content` for Alert, #568
+- Added styles for focused Button, #982
+- Fixed `change` triggering timing in Switch, #1162
+- Fixed TimeSelect being disabled when start time is set to `00:00`, #676
+- Added `show-header` attribute and `header-click` method for Table, #1195
+- Improved `height` attribute for Table when set to a string, #1195
+- Fixed `selection-change` of Table not triggering in some cases, #1198
+- Fixed Table's fixed columns not disappear when `fixed` attribute is dynamically changed, #1182
+
 ### 1.0.1

 *2016-11-16*
@@ -23,7 +39,7 @@
 - Fixed DiatePicker not refresh year when switched in month picker, #1070
 - Added $loading service
 - Added `manual` trigger in Popover
- Added props: `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
+- Added props: `nodeKey`, `emptyText`, `checkStrictly`, `defaultExpandAll`, `autoExpandParent`, `defaultCheckedKeys`, `defaultExpandedKeys` and method: `setCheckedNodes` for Tree

 ### 1.0.0

--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,20 @@
 ## 更新日志

+### 1.0.2
+*2016-11-18*
+
+- 新增 Table `context` 属性，可以指定自定义 column 内部可获取的上下文，#1161
+- 新增 多种语言支持
+- 修复 没有正确动态渲染语言的问题，#1160
+- 新增 Alert 的 `render-content` 属性，#568
+- 新增 Button 的 focus 样式，#982
+- 修复 Switch 的 `change` 事件触发时机错误的问题，#1162
+- 修复 TimeSelect 开始时间设置 `00:00` 后会被禁用的问题，#676
+- 新增 Table `show-header` 属性，`header-click` 事件。#1195
+- 完善 Table 的 `height` 属性，当 `height` 属性为字符串的时候，表示 Table 的高度受外部样式控制，#1195
+- 修复 Table 的 `selection-change` 在某些情况下不触发的问题，#1198
+- 修复 Table 动态修改 `fixed` 属性可能会造成锁定列不消失的问题，#1182
+
 ### 1.0.1
 *2016-11-16*

@@ -23,7 +38,7 @@
 - 修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070
 - 新增 $loading 服务，用以调用 Loading
 - 新增 Popover 可手动控制显示隐藏，将 trigger 设置为 `manual`
- 新增 Tree 的 `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` 属性，`setCheckedNodes` 方法。
+- 新增 Tree 的 `nodeKey`、`emptyText`、`checkStrictly`、`defaultExpandAll`、`autoExpandParent`、`defaultCheckedKeys`、`defaultExpandedKeys` 属性，`setCheckedNodes` 方法。


 ### 1.0.0
--- a/2
+++ b/2
@@ -33,7 +33,7 @@ deploy:
 	@npm run deploy

 pub:
-	./node_modules/.bin/kp $(filter-out $@,$(MAKECMDGOALS))
+	npm run pub

 pub-all:
 	npm run pub:all
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -39,8 +39,7 @@ module.exports = {
  version: '{{version}}',
  locale: locale.use,
  install,
-  Loading: Loading.directive,
-  LoadingService: Loading.service,
+  Loading,
 {{list}}
 };
 `;
--- a/build/cooking.demo.js
+++ b/build/cooking.demo.js
@@ -26,7 +26,7 @@ cooking.set({
      favicon: './examples/favicon.ico'
    }
  ],
-  publicPath: process.env.CI_ENV || '/',
+  publicPath: process.env.CI_ENV || '',
  hash: true,
  devServer: {
    port: 8085,
@@ -43,6 +43,11 @@ cooking.set({
  postcss: config.postcss
 });

+// fix publicPath
+if (!process.env.CI_ENV) {
+  cooking.add('output.publicPath', '');
+}
+
 cooking.add('loader.md', {
  test: /\.md$/,
  loader: 'vue-markdown-loader'
--- a/build/deploy-ci.sh
+++ b/build/deploy-ci.sh
@@ -1,15 +1,16 @@
 #! /bin/sh
 mkdir temp_web
+git config --global user.name "element-bot"
+git config --global user.email "wallement@gmail.com"

 # build dev site
-if [ "$TRAVIS_BRANCH" = "master" ] && [ "$GH_TOKEN" ]; then
-  npm run deploy:dev
+if [ "$ROT_TOKEN" ]; then
+  npm run build:file && CI_ENV=/dev/$TRAVIS_BRANCH/ node_modules/.bin/cooking build -c build/cooking.demo.js
  cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElementUI/dev.git && cd dev
-  git config user.name "element_bot"
-  git config user.email "element_bot"
-  rm -rf `find * ! -name README.md`
-  cp -rf ../../examples/element-ui/** .
+  git clone https://$ROT_TOKEN@github.com/ElementUI/dev.git && cd dev
+  mkdir $TRAVIS_BRANCH
+  rm -rf $TRAVIS_BRANCH/**
+  cp -rf ../../examples/element-ui/** $TRAVIS_BRANCH/
  git add -A .
  git commit -m "$TRAVIS_COMMIT_MSG"
  git push origin master
@@ -17,26 +18,25 @@ if [ "$TRAVIS_BRANCH" = "master" ] && [ "$GH_TOKEN" ]; then
 fi

 # push theme-default
-if [ "$TRAVIS_BRANCH" = "master" ] && [ "$GH_TOKEN" ]; then
+if [ "$ROT_TOKEN" ]; then
  cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
-  git config user.name "element_bot"
-  git config user.email "element_bot"
+  git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
  rm -rf *
  cp -rf ../../packages/theme-default/** .
  git add -A .
  git commit -m "$TRAVIS_COMMIT_MSG"
-  git push origin master --tags
+  git push origin $TRAVIS_BRANCH
  cd ../..
 fi

-if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then
+if [ "$TRAVIS_TAG" ] && [ "$ROT_TOKEN" ]; then
+  # site sub folder
+  SUB_FOLDER=$(echo $TRAVIS_TAG | grep -o -E '^\d+\.\d+')
+
  # build lib
  npm run dist
  cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElementUI/lib.git && cd lib
-  git config user.name "element_bot"
-  git config user.email "element_bot"
+  git clone https://$ROT_TOKEN@github.com/ElementUI/lib.git && cd lib
  rm -rf `find * ! -name README.md`
  cp -rf ../../lib/** .
  git add -A .
@@ -47,9 +47,7 @@ if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then

  # build theme-default
  cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
-  git config user.name "element_bot"
-  git config user.email "element_bot"
+  git clone https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
  rm -rf *
  cp -rf ../../packages/theme-default/** .
  git add -A .
@@ -61,12 +59,14 @@ if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then
  # build site
  npm run deploy:build
  cd temp_web
-  git clone https://$GH_TOKEN@github.com/ElemeFE/element.git && cd element
-  git config user.name "element_bot"
-  git config user.email "element_bot"
-  git checkout gh-pages
-  rm -rf `find * ! -name README.md`
+  git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
+
+  # only remove files
+  mkdir $SUB_FOLDER
+  rm -f *
+  rm -rf $SUB_FOLDER/**
  cp -rf ../../examples/element-ui/** .
+  cp -rf ../../examples/element-ui/** $SUB_FOLDER/
  git add -A .
  git commit -m "$TRAVIS_COMMIT_MSG"
  git push origin gh-pages
--- a/build/git-release.sh
+++ b/build/git-release.sh
@@ -0,0 +1,19 @@
+#!/usr/bin/env sh
+git checkout dev
+
+if test -n "$(git status --porcelain)"; then
+  echo 'Unclean working tree. Commit or stash changes first.' >&2;
+  exit 128;
+fi
+
+if ! git fetch --quiet 2>/dev/null; then
+  echo 'There was a problem fetching your branch. Run `git fetch` to see more...' >&2;
+  exit 128;
+fi
+
+if test "0" != "$(git rev-list --count --left-only @'{u}'...HEAD)"; then
+  echo 'Remote history differ. Please pull changes.' >&2;
+  exit 128;
+fi
+
+echo 'No conflicts.' >&2;
--- a/build/release.sh
+++ b/build/release.sh
@@ -1,3 +1,7 @@
+git checkout master
+git merge dev
+
+#!/usr/bin/env sh
 set -e
 echo "Enter release version: "
 read VERSION
@@ -24,7 +28,11 @@ then
  npm version $VERSION --message "[release] $VERSION"

  # publish
-  git push eleme refs/tags/v$VERSION
  git push eleme master
+  git push eleme refs/tags/v$VERSION
+  git checkout dev
+  git rebase master
+  git push eleme dev
+
  npm publish
 fi
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -54,6 +54,7 @@
  .container,
  .page-container {
    width: 1140px;
+    padding: 0 30px;
    margin: 0 auto;
  }

@@ -101,6 +102,13 @@
      width: 100%;
    }
  }
+
+  @media (max-width: 768px) {
+    .container,
+    .page-container {
+      padding: 0 20px;
+    }
+  }
 </style>

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

    .container {
      height: 100%;
+      box-sizing: border-box;
    }

    .footer-main {
@@ -122,6 +123,13 @@
      margin: 10px;
    }
  }
+  @media (max-width: 768px) {
+    .footer {
+      .footer-social {
+        display: none;
+      }
+    }
+  }
 </style>

 <script type="text/babel">
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -15,6 +15,7 @@

    .container {
      height: 100%;
+      box-sizing: border-box;
    }

    h1 {
@@ -51,9 +52,13 @@
      padding: 0;
      margin: 0;
    }
-    .nav-logo {
+    .nav-logo,
+    .nav-logo-small {
      vertical-align: sub;
    }
+    .nav-logo-small {
+      display: none;
+    }
    .nav-item {
      margin: 0;
      float: left;
@@ -116,6 +121,40 @@
    top: 0;
    background-color: rgba(32, 160, 255, 0);
  }
+
+  @media (max-width: 850px) {
+    .header {
+      .nav-logo {
+        display: none;
+      }
+      .nav-logo-small {
+        display: inline-block;
+      }
+      .nav-item {
+        margin-left: 6px;
+
+        &:last-child {
+          margin-left: 10px;
+        }
+         
+        a {
+          padding: 0 5px;
+        }
+      }
+    }
+  }
+  @media (max-width: 700px) {
+    .header {
+      .container {
+        padding: 0 12px;
+      }
+      .nav-item a,
+      .nav-lang {
+        font-size: 12px;
+        vertical-align: top;
+      }
+    }
+  }
 </style>
 <template>
  <div class="headerWrapper">
@@ -131,6 +170,10 @@
            src="../assets/images/element-logo.svg"
            alt="element-logo"
            class="nav-logo">
+          <img
+            src="../assets/images/element-logo-small.svg"
+            alt="element-logo"
+            class="nav-logo-small">
        </router-link></h1>
        <ul class="nav">
          <li class="nav-item">
--- a/examples/components/side-nav.vue
+++ b/examples/components/side-nav.vue
@@ -55,10 +55,10 @@
  }
 </style>
 <template>
-  <div class="side-nav">
+  <div class="side-nav" :style="navStyle">
    <ul>
      <li class="nav-item" v-for="item in data">
-        <a v-if="!item.path">{{item.name}}</a>
+        <a v-if="!item.path" @click="expandMenu">{{item.name}}</a>
        <router-link
          v-else
          active-class="active"
@@ -79,7 +79,7 @@
        </ul>
        <template v-if="item.groups">
          <div class="nav-group" v-for="group in item.groups">
-            <div class="nav-group__title">{{group.groupName}}</div>
+            <div class="nav-group__title" @click="expandMenu">{{group.groupName}}</div>
            <ul class="pure-menu-list">
              <li
                class="nav-item"
@@ -110,8 +110,64 @@
    data() {
      return {
        highlights: [],
-        navState: []
+        navState: [],
+        isSmallScreen: false
      };
+    },
+    watch: {
+      '$route.path'() {
+        this.handlePathChange();
+      }
+    },
+    computed: {
+      navStyle() {
+        return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
+      }
+    },
+    methods: {
+      handleResize() {
+        this.isSmallScreen = document.documentElement.clientWidth < 768;
+        this.handlePathChange();
+      },
+      handlePathChange() {
+        if (!this.isSmallScreen) {
+          this.expandAllMenu();
+          return;
+        }
+        this.$nextTick(() => {
+          this.hideAllMenu();
+          let activeAnchor = this.$el.querySelector('a.active');
+          let ul = activeAnchor.parentNode;
+          while (ul.tagName !== 'UL') {
+            ul = ul.parentNode;
+          }
+          ul.style.height = 'auto';
+        });
+      },
+      hideAllMenu() {
+        [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+          ul.style.height = '0';
+        });
+      },
+      expandAllMenu() {
+        [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+          ul.style.height = 'auto';
+        });
+      },
+      expandMenu(event) {
+        if (!this.isSmallScreen) return;
+        let target = event.currentTarget;
+        if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
+        this.hideAllMenu();
+        event.currentTarget.nextElementSibling.style.height = 'auto';
+      }
+    },
+    mounted() {
+      this.handleResize();
+      window.addEventListener('resize', this.handleResize);
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize);
    }
  };
 </script>
--- a/examples/docs/en-US/alert.md
+++ b/examples/docs/en-US/alert.md
@@ -166,6 +166,7 @@ Description includes a message with more detailed information.
 | **title** | title **REQUIRED** | string | — | — |
 | type | component type | string | success/warning/info/error | info |
 | description | supportive text | string | — | — |
+| render-content | render function for content area, overrides `description` | function(h) | — | — |
 | closable | if closable or not | boolean | — | true |
 | close-text | customized close button text | string | — | — |
 | show-icon | if a type icon is displayed | boolean | — | false |
--- a/examples/docs/en-US/custom-theme.md
+++ b/examples/docs/en-US/custom-theme.md
@@ -63,7 +63,7 @@ node_modules/.bin/et
 By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:

 ```javascript
-import './theme/index.css'
+import '../theme/index.css'
 import ElementUI from 'element-ui'
 import Vue from 'vue'

--- a/examples/docs/en-US/form.md
+++ b/examples/docs/en-US/form.md
@@ -2,8 +2,9 @@
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
-        var age = parseInt(value, 10);
-
+        if (!value) {
+          return callback(new Error('Please input the age'));
+        }
        setTimeout(() => {
          if (!Number.isInteger(age)) {
            callback(new Error('Please input digits'));
@@ -110,16 +111,13 @@
        },
        rules2: {
          pass: [
-            { required: true, message: 'Please input the password', trigger: 'blur' },
-            { validator: validaePass }
+            { validator: validaePass, trigger: 'blur' }
          ],
          checkPass: [
-            { required: true, message: 'Please input the password again', trigger: 'blur' },
-            { validator: validaePass2 }
+            { validator: validaePass2, trigger: 'blur' }
          ],
          age: [
-            { required: true, message: 'Please input the age', trigger: 'blur' },
-            { validator: checkAge, trigger: 'change' }
+            { validator: checkAge, trigger: 'change', trigger: 'blur' }
          ]
        },
        dynamicForm: {
@@ -645,8 +643,9 @@ Form component allows you to verify your data, helping you find and correct erro
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
-        var age = parseInt(value, 10);
-
+        if (!value) {
+          return callback(new Error('Please input the age'));
+        }
        setTimeout(() => {
          if (!Number.isInteger(age)) {
            callback(new Error('Please input digits'));
@@ -656,10 +655,10 @@ Form component allows you to verify your data, helping you find and correct erro
            } else {
              callback();
            }
-          } 
+          }
        }, 1000);
      };
-      var validatePass = (rule, value, callback) => {
+      var validaePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('Please input the password'));
        } else {
@@ -669,7 +668,7 @@ Form component allows you to verify your data, helping you find and correct erro
          callback();
        }
      };
-      var validatePass2 = (rule, value, callback) => {
+      var validaePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('Please input the password again'));
        } else if (value !== this.ruleForm2.pass) {
@@ -686,16 +685,13 @@ Form component allows you to verify your data, helping you find and correct erro
        },
        rules2: {
          pass: [
-            { required: true, message: 'Please input the password', trigger: 'blur' },
-            { validator: validatePass }
+            { validator: validaePass, trigger: 'blur' }
          ],
          checkPass: [
-            { required: true, message: 'Please input the password again', trigger: 'blur' },
-            { validator: validatePass2 }
+            { validator: validaePass2, trigger: 'blur' }
          ],
          age: [
-            { required: true, message: 'Please input the age', trigger: 'blur' },
-            { validator: checkAge, trigger: 'change' }
+            { validator: checkAge, trigger: 'change', trigger: 'blur' }
          ]
        }
      };
--- a/examples/docs/en-US/i18n.md
+++ b/examples/docs/en-US/i18n.md
@@ -39,10 +39,18 @@ webpack.config.js

 Currently Element ships with the following languages:
 <ul class="language-list">
-  <li>Chinese (zh-CN)</li>
+  <li>Simplified Chinese (zh-CN)</li>
  <li>English (en)</li>
  <li>German (de)</li>
  <li>Portuguese (pt)</li>
+  <li>Spanish (es)</li>
+  <li>Danish (da)</li>
+  <li>French (fr)</li>
+  <li>Norwegian (nb-NO)</li>
+  <li>Traditional Chinese (zh-TW)</li>
+  <li>Italian (it)</li>
+  <li>Korean (ko)</li>
+  <li>Japanese (ja)</li>
 </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
@@ -36,7 +36,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
    </el-dialog>
  </div>
 </body>
-  <!-- import Vue before Mint UI -->
+  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
--- a/examples/docs/en-US/loading.md
+++ b/examples/docs/en-US/loading.md
@@ -152,7 +152,7 @@ You can customize a text message.

 ### Full screen loading

-Show a full screen animation while loading data.  
+Show a full screen animation while loading data.

 :::demo Add the `fullscreen` modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier `lock`.

@@ -189,15 +189,15 @@ Show a full screen animation while loading data.
 ### Service
 You can also invoke Loading with a service. Import Loading service:
 ```javascript
-import { LoadingService } from 'element-ui';
+import { Loading } from 'element-ui';
 ```
 Invoke it:
 ```javascript
-LoadingService(options);
+Loading.service(options);
 ```
 The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method:
 ```javascript
-let loadingInstance = LoadingService(options);
+let loadingInstance = Loading.service(options);
 loadingInstance.close();
 ```
 If Element is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.
--- a/examples/docs/en-US/quickstart.md
+++ b/examples/docs/en-US/quickstart.md
@@ -142,7 +142,7 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 import App from './App.vue'

-Vue.use(MintUI)
+Vue.use(ElementUI)

 new Vue({
  el: '#app',
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -110,6 +110,17 @@
    },

    methods: {
+      handleClick() {
+        console.log('click');
+      },
+
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
@@ -504,11 +515,12 @@ When there are too many columns, you can fix some of them.
    </el-table-column>
    <el-table-column
      inline-template
+      :context="_self"
      fixed="right"
      label="Operations"
      width="120">
      <span>
-        <el-button type="text" size="small">Detail</el-button>
+        <el-button @click="handleClick" type="text" size="small">Detail</el-button>
        <el-button type="text" size="small">Edit</el-button>
      </span>
    </el-table-column>
@@ -517,6 +529,11 @@ When there are too many columns, you can fix some of them.

 <script>
  export default {
+    methods: {
+      handleClick() {
+        console.log('click');
+      }
+    },
    data() {
      return {
        tableData: [{
@@ -959,17 +976,107 @@ Filter the table to find desired data.
 ```
 :::

+### Custom column template
+ 
+Customize table column so it can be integrated with other components.
+:::demo Activate custom column template by adding the `inline-template` attribute. By default, the context of `el-table-column` is the one where `el-table` lies, and you can customize it with the `context` attribute, e.g. `:context="_self"` refers to the current context. This is useful when sometimes Table is encapsulated into another component, and `table-column` is distributed by slots. In `el-column`, you have access to the following data: row, column, $index and store (state management of Table).
+```html
+<template>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      inline-template
+      label="Date"
+      width="180">
+      <div>
+        <el-icon name="time"></el-icon>
+        <span style="margin-left: 10px">{{ row.date }}</span>
+      </div>
+    </el-table-column>
+    <el-table-column
+      inline-template
+      label="Name"
+      width="180">
+      <el-popover trigger="hover" placement="top">
+        <p>Name: {{ row.name }}</p>
+        <p>Addr: {{ row.address }}</p>
+        <div slot="reference">
+          <el-tag>{{ row.name }}</el-tag>
+        </div>
+      </el-popover>
+    </el-table-column>
+    <el-table-column
+      :context="_self"
+      inline-template
+      label="Operations">
+      <div>
+        <el-button
+          size="small"
+          @click="handleEdit($index, row)">
+          Edit
+        </el-button>
+        <el-button
+          size="small"
+          type="danger"
+          @click="handleDelete($index, row)">
+          Delete
+        </el-button>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Table Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | table data | array | — | — |
-| height | table's height. By default  | string/number | — | — |
+| height | Table's height. By default it has an auto height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
 | stripe | whether table is striped | boolean | — | false |
 | border | whether table has vertical border | boolean | — | false |
 | fit | whether width of column automatically fits its container | boolean | — | true |
+| show-header | whether table header is visible | boolean | - | true |
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
 | row-class-name | function that returns custom class names for a row | Function(row, index) | — | — |
-| row-key | Key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
+| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
+| context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | - | current context where Table lies |

 ### Table Events
 | Event Name | Description | Parameters |
@@ -981,6 +1088,7 @@ Filter the table to find desired data.
 | 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 |
+| header-click | triggers when clicking a column header | column, event |
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |

@@ -1005,7 +1113,8 @@ Filter the table to find desired data.
 | resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
 | formatter | function that formats content | Function(row, column) | — | — |
 | show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
-| inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object, and current context can be accessed by `_self` in JSX. In this case you don't need to set `prop`. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), _self( context), store (table store) }` | — | — |
+| context | context of Table-column, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context | Object | - | current context where Table lies |
+| inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), store (table store) }` | — | — |
 | align | alignment | string | left/center/right | left |
 | class-name | class name of cells in the column | string | — | — |
 | selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — |
--- a/examples/docs/zh-CN/alert.md
+++ b/examples/docs/zh-CN/alert.md
@@ -170,6 +170,7 @@
 | **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 |
--- a/examples/docs/zh-CN/custom-theme.md
+++ b/examples/docs/zh-CN/custom-theme.md
@@ -63,7 +63,7 @@ node_modules/.bin/et
 默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。

 ```javascript
-import './theme/index.css'
+import '../theme/index.css'
 import ElementUI from 'element-ui'
 import Vue from 'vue'

--- a/examples/docs/zh-CN/form.md
+++ b/examples/docs/zh-CN/form.md
@@ -2,13 +2,14 @@
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
-        var age = parseInt(value, 10);
-
+        if (!value) {
+          return callback(new Error('年龄不能为空'));
+        }
        setTimeout(() => {
-          if (!Number.isInteger(age)) {
+          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
-          } else{
-            if (age < 18) {
+          } else {
+            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
@@ -110,16 +111,13 @@
        },
        rules2: {
          pass: [
-            { required: true, message: '请输入密码', trigger: 'blur' },
-            { validator: validatePass }
+            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
-            { required: true, message: '请再次输入密码', trigger: 'blur' },
-            { validator: validatePass2 }
+            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
-            { required: true, message: '请填写年龄', trigger: 'blur' },
-            { validator: checkAge, trigger: 'change' }
+            { validator: checkAge, trigger: 'blur' }
          ]
        },
        dynamicForm: {
@@ -626,7 +624,7 @@
    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
-    <el-input v-model="ruleForm2.age"></el-input>
+    <el-input v-model.number="ruleForm2.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleSubmit2">提交</el-button>
@@ -637,13 +635,14 @@
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
-        var age = parseInt(value, 10);
-
+        if (!value) {
+          return callback(new Error('年龄不能为空'));
+        }
        setTimeout(() => {
-          if (!Number.isInteger(age)) {
+          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
-          } else{
-            if (age < 18) {
+          } else {
+            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
@@ -678,16 +677,13 @@
        },
        rules2: {
          pass: [
-            { required: true, message: '请输入密码', trigger: 'blur' },
-            { validator: validatePass }
+            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
-            { required: true, message: '请再次输入密码', trigger: 'blur' },
-            { validator: validatePass2 }
+            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
-            { required: true, message: '请填写年龄', trigger: 'blur' },
-            { validator: checkAge, trigger: 'change' }
+            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
--- a/examples/docs/zh-CN/i18n.md
+++ b/examples/docs/zh-CN/i18n.md
@@ -51,10 +51,18 @@ Vue.component(Select.name, Select)

 目前 Element 内置了以下语言：
 <ul class="language-list">
-  <li>汉语（zh-CN）</li>
+  <li>简体中文（zh-CN）</li>
  <li>英语（en）</li>
  <li>德语（de）</li>
  <li>葡萄牙语（pt）</li>
+  <li>西班牙语（es）</li>
+  <li>丹麦语（da）</li>
+  <li>法语（fr）</li>
+  <li>挪威语（nb-NO）</li>
+  <li>繁体中文（zh-TW）</li>
+  <li>意大利语（it）</li>
+  <li>韩语（ko）</li>
+  <li>日语（ja）</li>
 </ul>
 
 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
--- a/examples/docs/zh-CN/layout.md
+++ b/examples/docs/zh-CN/layout.md
@@ -250,7 +250,7 @@
 ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
 ```html
 <el-row type="flex" class="row-bg">
-  <el-col :span="6" :sm="8" :md="{span: 4, offset: 2}"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 </el-row>
--- a/examples/docs/zh-CN/loading.md
+++ b/examples/docs/zh-CN/loading.md
@@ -193,15 +193,15 @@
 ### 服务
 Loading 还可以以服务的方式调用。引入 Loading 服务：
 ```javascript
-import { LoadingService } from 'element-ui';
+import { Loading } from 'element-ui';
 ```
 在需要调用时：
 ```javascript
-LoadingService(options);
+Loading.service(options);
 ```
 其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
 ```javascript
-let loadingInstance = LoadingService(options);
+let loadingInstance = Loading.service(options);
 loadingInstance.close();
 ```
 如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。
--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -110,6 +110,18 @@
    },

    methods: {
+      handleClick() {
+        console.log('click');
+      },
+
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
+
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
@@ -512,11 +524,12 @@
    </el-table-column>
    <el-table-column
      inline-template
+      :context="_self"
      fixed="right"
      label="操作"
      width="100">
      <span>
-        <el-button type="text" size="small">查看</el-button>
+        <el-button @click="handleClick" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </span>
    </el-table-column>
@@ -525,6 +538,12 @@

 <script>
  export default {
+    methods: {
+      handleClick() {
+        console.log(1);
+      }
+    },
+
    data() {
      return {
        tableData: [{
@@ -962,17 +981,107 @@
 ```
 :::

+### 自定义列模板
+
+自定义列的显示内容，可组合其他组件使用。
+:::demo 通过设置 `inline-template` 属性可以开启自定义模板功能，此时 `el-table-column` 的上下文指的是 `el-table` 所处的上下文，当然你可以通过 `context` 属性指定上下文环境，例如设置成 `:context="_self"` 就是指的当前上下文。有些时候我们会把 table 封装在其他组件里，通过 slot 设置 `table-column`，这样的话就要注意设置 `context`。在 column 组件内部，可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。
+```html
+<template>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      inline-template
+      label="日期"
+      width="180">
+      <div>
+        <el-icon name="time"></el-icon>
+        <span style="margin-left: 10px">{{ row.date }}</span>
+      </div>
+    </el-table-column>
+    <el-table-column
+      inline-template
+      label="姓名"
+      width="180">
+      <el-popover trigger="hover" placement="top">
+        <p>姓名: {{ row.name }}</p>
+        <p>住址: {{ row.address }}</p>
+        <div slot="reference">
+          <el-tag>{{ row.name }}</el-tag>
+        </div>
+      </el-popover>
+    </el-table-column>
+    <el-table-column
+      :context="_self"
+      inline-template
+      label="操作">
+      <div>
+        <el-button
+          size="small"
+          @click="handleEdit($index, row)">
+          编辑
+        </el-button>
+        <el-button
+          size="small"
+          type="danger"
+          @click="handleDelete($index, row)">
+          删除
+        </el-button>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Table Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | 显示的数据 | array | — | — |
-| height | table 的高度，默认高度为空，即自动高度，单位 px | string/number | — | — |
+| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。  | string/number | — | — |
 | stripe | 是否为斑马纹 table | boolean | — | false |
 | border | 是否带有纵向边框 | boolean | — | false |
 | fit | 列的宽度是否自撑开 | boolean | — | true |
+| show-header | 是否显示表头 | boolean | - | true |
 | highlight-current-row | 是否要高亮当前行 | boolean | — | false |
 | row-class-name | 行的 className 的回调。 | Function(row, index) | — | — |
 | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — |
+| context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root`。优先读取 column 的 context 属性。 | Object | - | Table 所处上下文 |

 ### Table Events
 | 事件名 | 说明 | 参数 |
@@ -984,6 +1093,7 @@
 | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
 | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
 | row-click | 当某一行被点击时会触发该事件 | row, event |
+| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |

@@ -1008,7 +1118,8 @@
 | resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
 | formatter | 用来格式化内容 | Function(row, column) | — | — |
 | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
-| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 prop 属性。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), _self(当前上下文), store(table store) }` 的信息。 | — | — |
+| context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root` | Object | - | Table 所处上下文 |
+| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), store(table store) }` 以及 Table 所处的上下文环境。 | — | — |
 | align | 对齐方式 | String | left, center, right | left |
 | class-name | 列的 className | string | — | — |
 | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
--- a/examples/i18n/page.json
+++ b/examples/i18n/page.json
@@ -3,6 +3,7 @@
    "lang": "zh-CN",
    "pages": {
      "index": {
+        "lang": "zh-CN",
        "titleSize": "46",
        "theatreSize": "46",
        "paraHeight": "1.8",
@@ -96,6 +97,7 @@
    "lang": "en-US",
    "pages": {
      "index": {
+        "lang": "en-US",
        "titleSize": "50",
        "theatreSize": "42",
        "paraHeight": "1.6",
--- a/examples/index.tpl
+++ b/examples/index.tpl
@@ -2,12 +2,13 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
    <title>Element</title>
  </head>
  <body>
    <div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.runtime.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.runtime.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.min.js"></script><% } %>
  </body>
  <% if (process.env.NODE_ENV === 'production') { %><script>
--- a/examples/pages/template/component.tpl
+++ b/examples/pages/template/component.tpl
@@ -1,6 +1,7 @@
 <style>
  .page-component {
    padding-bottom: 95px;
+    box-sizing: border-box;
  }
  .page-component {
    .content {
@@ -41,10 +42,10 @@
 <template>
  <div class="page-container page-component">
    <el-row>
-      <el-col :span="6">
+      <el-col :xs="24" :sm="6">
        <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
      </el-col>
-      <el-col :span="18">
+      <el-col :xs="24" :sm="18">
        <router-view class="content"></router-view>
        <footer-nav></footer-nav>
      </el-col>
--- a/examples/pages/template/design.tpl
+++ b/examples/pages/template/design.tpl
@@ -28,28 +28,28 @@
  <div>
    <h2><%= 1 ></h2>
    <el-row :gutter="14" class="cards">
-      <el-col :span="6">  
+      <el-col :xs="12" :sm="6">
        <div class="card">
          <img src="~examples/assets/images/consistency.png" alt="Consistency">
          <h4><%= 2 ></h4>
          <span><%= 3 ></span>
        </div>
      </el-col>
-      <el-col :span="6">  
+      <el-col :xs="12" :sm="6">
        <div class="card">
          <img src="~examples/assets/images/feedback.png" alt="Feedback">
          <h4><%= 4 ></h4>
          <span><%= 5 ></span>
        </div>
      </el-col>
-      <el-col :span="6">  
+      <el-col :xs="12" :sm="6">
        <div class="card">
          <img src="~examples/assets/images/efficiency.png" alt="Efficiency">
          <h4><%= 6 ></h4>
          <span><%= 7 ></span>
        </div>
      </el-col>
-      <el-col :span="6">  
+      <el-col :xs="12" :sm="6">
        <div class="card">
          <img src="~examples/assets/images/controllability.png" alt="Controllability">
          <h4><%= 8 ></h4>
--- a/examples/pages/template/guide.tpl
+++ b/examples/pages/template/guide.tpl
@@ -1,6 +1,7 @@
 <style>
  .page-guide {
-    padding: 55px 0 95px;
+    padding: 55px 30px 95px;
+    box-sizing: border-box;

    .content {
      padding-left: 25px;
@@ -48,14 +49,22 @@
      }
    }
  }
+
+  @media (max-width: 768px) {
+    .page-guide {
+      .content {
+        padding-left: 0;
+      }
+    }
+  }
 </style>
 <template>
  <div class="page-container page-guide">
    <el-row>
-      <el-col :span="5">
+      <el-col :xs="24" :sm="5">
        <side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
      </el-col>
-      <el-col :span="19">
+      <el-col :xs="24" :sm="19">
        <router-view class="content"></router-view>
      </el-col>
    </el-row>
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -55,7 +55,7 @@
      font-size: <%= titleSize >px;
      margin: 0;
    }
-    
+
    p {
      font-size: 14px;
      opacity: .8;
@@ -136,7 +136,6 @@
      display: block;

      &:hover {
-        background-color: #20a0ff;
        color: #fff;
        background: #20a0ff;
      }
@@ -153,6 +152,52 @@
  @media (max-width: 1140px) {
    .cards {
      width: 100%;
+      .container {
+        width: 100%;
+      }
+    }
+    .banner .container {
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .banner img {
+      right: 0;
+    }
+  }
+
+  @media (max-width: 1000px) {
+    .banner .container {
+      img {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .cards {
+      li {
+        width: 80%;
+        margin: 0 auto 20px;
+        float: none;
+      }
+      .card {
+        height: auto;
+        padding-bottom: 54px;
+      }
+    }
+    .banner-stars {
+      display: none;
+    }
+    .banner-desc {
+      #line2 {
+        display: none;
+      }
+      h2 {
+        font-size: 32px;
+      }
+      p {
+        width: auto;
+      }
    }
  }
 </style>
@@ -179,7 +224,7 @@
            <p><%= 4 ></p>
            <router-link
              active-class="active"
-              to="/guide/design"
+              to="/<%= lang >/guide/design"
              exact><%= 5 >
            </router-link>
          </div>
@@ -191,7 +236,7 @@
            <p><%= 7 ></p>
            <router-link
              active-class="active"
-              to="/component/layout"
+              to="/<%= lang >/component/layout"
              exact><%= 5 >
            </router-link>
          </div>
@@ -202,8 +247,8 @@
            <h3><%= 8 ></h3>
            <p><%= 9 ></p>
            <router-link
-              active-class="active" 
-              to="/resource"
+              active-class="active"
+              to="/<%= lang >/resource"
              exact><%= 5 >
            </router-link>
          </div>
--- a/examples/pages/template/resource.tpl
+++ b/examples/pages/template/resource.tpl
@@ -1,6 +1,7 @@
 <style scoped>
  .page-resource {
    padding-top: 55px;
+    box-sizing: border-box;
  }
  .cards {
    margin: 35px auto 110px;
@@ -76,6 +77,23 @@
      margin-top: 20px;
    }
  }
+  @media (max-width: 850px) {
+    .cards {
+      li {
+        max-width: 500px;
+        float: none;
+        margin: 10px auto 30px;
+        width: 80%;
+        .card {
+          height: auto;
+          padding-bottom: 20px;
+        }
+      }
+      h3 {
+        height: auto;
+      }
+    }
+  }
 </style>
 <template>
  <div class="page-container page-resource">
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
  "description": "A Component Library for Vue.js.",
  "main": "lib/element-ui.common.js",
  "files": [
@@ -16,14 +16,13 @@
    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes",
    "deploy": "npm run deploy:build && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui",
    "deploy:build": "npm run build:file && cooking build -c build/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME",
-    "deploy:dev": "npm run build:file && CI_ENV=/dev/ cooking build -c build/cooking.demo.js",
    "dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p",
    "dev:play": "npm run build:file && cross-env PLAY_ENV=true cooking watch -c build/cooking.demo.js -p",
    "dist": "npm run clean && npm run build:file && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p && npm run build:utils && npm run build:theme",
    "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": "git checkout master && git pull eleme master --rebase && sh build/release.sh",
+    "pub": "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"
--- a/packages/alert/src/main.vue
+++ b/packages/alert/src/main.vue
@@ -4,7 +4,7 @@
      <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
      <div class="el-alert__content">
        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
-        <p class="el-alert__description" v-if="description">{{ description }}</p>
+        <desc-content></desc-content>
        <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
      </div>
    </div>
@@ -45,7 +45,8 @@
      showIcon: {
        type: Boolean,
        default: false
-      }
+      },
+      renderContent: Function
    },

    data() {
@@ -54,6 +55,21 @@
      };
    },

+    components: {
+      descContent: {
+        render(h) {
+          const parent = this.$parent;
+          if (parent.renderContent) {
+            return parent.renderContent(h);
+          } else if (parent.description) {
+            return <p class="el-alert__description">{ parent.description }</p>;
+          } else {
+            return '';
+          }
+        }
+      }
+    },
+
    methods: {
      close() {
        this.visible = false;
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -113,7 +113,7 @@
          while (compareTime(current, end) <= 0) {
            result.push({
              value: current,
-              disabled: compareTime(current, this.minTime || '00:00') <= 0
+              disabled: compareTime(current, this.minTime || '-1:-1') <= 0
            });
            current = nextTime(current, step);
          }
--- a/packages/loading/index.js
+++ b/packages/loading/index.js
@@ -1,6 +1,11 @@
 import directive from './src/directive';
 import service from './src/index';
+
 export default {
+  install(Vue) {
+    Vue.use(directive);
+    Vue.prototype.$loading = service;
+  },
  directive,
  service
 };
--- a/packages/message-box/src/main.js
+++ b/packages/message-box/src/main.js
@@ -1,10 +1,5 @@
-import { t } from 'element-ui/src/locale';
-
-const CONFIRM_TEXT = t('el.messagebox.confirm');
-const CANCEL_TEXT = t('el.messagebox.cancel');
-
 const defaults = {
-  title: '提示',
+  title: undefined,
  message: '',
  type: '',
  showInput: false,
@@ -22,8 +17,8 @@ const defaults = {
  confirmButtonPosition: 'right',
  confirmButtonHighlight: false,
  cancelButtonHighlight: false,
-  confirmButtonText: CONFIRM_TEXT,
-  cancelButtonText: CANCEL_TEXT,
+  confirmButtonText: '',
+  cancelButtonText: '',
  confirmButtonClass: '',
  cancelButtonClass: ''
 };
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -2,8 +2,8 @@
  <transition name="msgbox-fade">
    <div class="el-message-box__wrapper" v-show="value" @click.self="handleWrapperClick">
      <div class="el-message-box">
-        <div class="el-message-box__header" v-if="title !== ''">
-          <div class="el-message-box__title">{{ title }}</div>
+        <div class="el-message-box__header" v-if="title !== undefined">
+          <div class="el-message-box__title">{{ title || t('el.messagebox.title') }}</div>
          <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
        </div>
        <div class="el-message-box__content" v-if="message !== ''">
@@ -15,8 +15,8 @@
          </div>
        </div>
        <div class="el-message-box__btns">
-          <el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button>
-          <el-button ref="confirm" :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')">{{ confirmButtonText }}</el-button>
+          <el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText || t('el.messagebox.cancel') }}</el-button>
+          <el-button ref="confirm" :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')">{{ confirmButtonText || t('el.messagebox.confirm') }}</el-button>
        </div>
      </div>
    </div>
@@ -25,6 +25,7 @@

 <script type="text/babel">
  import Popup from 'vue-popup';
+  import Locale from 'element-ui/src/mixins/locale';
  import ElInput from 'element-ui/packages/input';
  import ElButton from 'element-ui/packages/button';
  import { addClass, removeClass } from 'wind-dom/src/class';
@@ -38,7 +39,7 @@
  };

  export default {
-    mixins: [Popup],
+    mixins: [Popup, Locale],

    props: {
      modal: {
@@ -173,7 +174,7 @@

    data() {
      return {
-        title: '',
+        title: undefined,
        message: '',
        type: '',
        showInput: false,
@@ -184,12 +185,11 @@
        inputErrorMessage: '',
        showConfirmButton: true,
        showCancelButton: false,
-        confirmButtonText: t('el.messagebox.confirm'),
-        cancelButtonText: t('el.messagebox.cancel'),
+        confirmButtonText: '',
+        cancelButtonText: '',
        confirmButtonClass: '',
        confirmButtonDisabled: false,
        cancelButtonClass: '',
-
        editorErrorMessage: null,
        callback: null
      };
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -39,7 +39,7 @@
      :name="name"
      :disabled="disabled"
      :readonly="!filterable || multiple"
-      @click.native="toggleMenu"
+      @focus="toggleMenu"
      @keyup.native="debouncedOnInputChange"
      @keydown.native.down.prevent="navigateOptions('next')"
      @keydown.native.up.prevent="navigateOptions('prev')"
@@ -149,7 +149,9 @@
      multiple: Boolean,
      placeholder: {
        type: String,
-        default: t('el.select.placeholder')
+        default() {
+          return t('el.select.placeholder');
+        }
      }
    },

--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@@ -5,7 +5,7 @@
      class="el-switch__input"
      type="checkbox"
      @change="handleChange"
-      v-model="currentValue"
+      v-model="_value"
      :name="name"
      :disabled="disabled">
    <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
@@ -79,7 +79,6 @@
    },
    data() {
      return {
-        currentValue: this.value,
        coreWidth: this.width,
        buttonStyle: {
          transform: ''
@@ -90,18 +89,22 @@
      hasText() {
        /* istanbul ignore next */
        return this.onText || this.offText;
+      },
+      _value: {
+        get() {
+          return this.value;
+        },
+        set(val) {
+          this.$emit('input', val);
+        }
      }
    },
    watch: {
-      value(val) {
-        this.currentValue = val;
+      value() {
        if (this.onColor || this.offColor) {
-          this.handleCoreColor();
+          this.setBackgroundColor();
        }
        this.handleButtonTransform();
-      },
-      currentValue(val) {
-        this.$emit('input', val);
      }
    },
    methods: {
@@ -111,9 +114,10 @@
      handleButtonTransform() {
        this.buttonStyle.transform = this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
      },
-      handleCoreColor() {
-        this.$refs.core.style.borderColor = this.value ? this.onColor : this.offColor;
-        this.$refs.core.style.backgroundColor = this.value ? this.onColor : this.offColor;
+      setBackgroundColor() {
+        let newColor = this.value ? this.onColor : this.offColor;
+        this.$refs.core.style.borderColor = newColor;
+        this.$refs.core.style.backgroundColor = newColor;
      }
    },
    mounted() {
@@ -123,7 +127,7 @@
      }
      this.handleButtonTransform();
      if ((this.onColor || this.offColor) && !this.disabled) {
-        this.handleCoreColor();
+        this.setBackgroundColor();
      }
    }
  };
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -5,6 +5,7 @@ export default {
    store: {
      required: true
    },
+    context: {},
    layout: {
      required: true
    },
@@ -43,7 +44,7 @@ export default {
                      on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                      on-mouseleave={ this.handleCellMouseLeave }>
                      {
-                        column.renderCell.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.$parent.$vnode.context })
+                        column.renderCell.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.context || this.$parent.$vnode.context })
                      }
                    </td>
                  )
--- a/packages/table/src/table-column.js
+++ b/packages/table/src/table-column.js
@@ -100,6 +100,7 @@ export default {
      type: Boolean,
      default: true
    },
+    context: {},
    align: String,
    showTooltipWhenOverflow: Boolean,
    showOverflowTooltip: Boolean,
@@ -186,6 +187,7 @@ export default {
      minWidth,
      width,
      isColumnGroup,
+      context: this.context,
      align: this.align ? 'is-' + this.align : null,
      sortable: this.sortable,
      sortMethod: this.sortMethod,
@@ -211,13 +213,18 @@ export default {
    column.renderCell = function(h, data) {
      if (_self.$vnode.data.inlineTemplate) {
        renderCell = function() {
+          data._self = _self.context || data._self;
          if (Object.prototype.toString.call(data._self) === '[object Object]') {
            for (let prop in data._self) {
              if (!data.hasOwnProperty(prop)) {
+                // _self.$set(data, prop, data._self[prop]);
                data[prop] = data._self[prop];
              }
            }
          }
+          // 静态内容会缓存到 _staticTrees 内，不改的话获取的静态数据就不是内部 context
+          data._staticTrees = _self._staticTrees;
+          data.$options.staticRenderFns = _self.$options.staticRenderFns;
          return _self.customRender.call(data);
        };
      }
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -33,6 +33,7 @@ export default {
                  on-mousemove={ ($event) => this.handleMouseMove($event, column) }
                  on-mouseout={ this.handleMouseOut }
                  on-mousedown={ ($event) => this.handleMouseDown($event, column) }
+                  on-click={ ($event) => this.handleClick($event, column) }
                  class={ [column.id, column.order, column.align, column.className || '', this.isCellHidden(cellIndex) ? 'is-hidden' : ''] }>
                  <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : ''] }>
                  {
@@ -162,6 +163,10 @@ export default {
      }, 16);
    },

+    handleClick(event, column) {
+      this.$parent.$emit('header-click', column, event);
+    },
+
    handleMouseDown(event, column) {
      /* istanbul ignore if */
      if (this.draggingColumn && this.border) {
@@ -239,7 +244,7 @@ export default {
      if (!this.dragging && this.border) {
        let rect = target.getBoundingClientRect();

-        var bodyStyle = document.body.style;
+        const bodyStyle = document.body.style;
        if (rect.width > 12 && rect.right - event.pageX < 8) {
          bodyStyle.cursor = 'col-resize';
          this.draggingColumn = column;
--- a/packages/table/src/table-layout.js
+++ b/packages/table/src/table-layout.js
@@ -8,6 +8,7 @@ class TableLayout {
    this.store = null;
    this.columns = null;
    this.fit = true;
+    this.showHeader = true;

    this.height = null;
    this.scrollX = false;
@@ -50,16 +51,21 @@ class TableLayout {
  }

  setHeight(height) {
-    if (typeof height === 'string' && /^\d+$/.test(height)) {
-      height = Number(height);
+    const el = this.table.$el;
+    if (typeof height === 'string') {
+      if (/^\d+$/.test(height)) {
+        height = Number(height);
+      }
    }

    this.height = height;

-    const el = this.table.$el;
-    if (!isNaN(height) && el) {
+    if (!el) return;
+    if (!isNaN(height)) {
      el.style.height = height + 'px';

+      this.updateHeight();
+    } else if (typeof height === 'string') {
      this.updateHeight();
    }
  }
@@ -67,12 +73,23 @@ class TableLayout {
  updateHeight() {
    const height = this.tableHeight = this.table.$el.clientHeight;
    const { headerWrapper } = this.table.$refs;
-    if (!headerWrapper) return;
-    const headerHeight = this.headerHeight = headerWrapper.offsetHeight;
-    const bodyHeight = height - headerHeight;
-    if (this.height !== null && !isNaN(this.height)) this.bodyHeight = bodyHeight;
-    this.fixedBodyHeight = this.scrollX ? bodyHeight - this.gutterWidth : bodyHeight;
-    this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
+    if (this.showHeader && !headerWrapper) return;
+    if (!this.showHeader) {
+      this.headerHeight = 0;
+      if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
+        this.bodyHeight = height;
+      }
+      this.fixedBodyHeight = this.scrollX ? height - this.gutterWidth : height;
+      this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
+    } else {
+      const headerHeight = this.headerHeight = headerWrapper.offsetHeight;
+      const bodyHeight = height - headerHeight;
+      if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
+        this.bodyHeight = bodyHeight;
+      }
+      this.fixedBodyHeight = this.scrollX ? bodyHeight - this.gutterWidth : bodyHeight;
+      this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
+    }
  }

  update() {
--- a/packages/table/src/table-store.js
+++ b/packages/table/src/table-store.js
@@ -255,11 +255,18 @@ TableStore.prototype.isSelected = function(row) {
 TableStore.prototype.clearSelection = function() {
  const states = this.states;
  states.isAllSelected = false;
+  const oldSelection = states.selection;
  states.selection = [];
+  if (oldSelection.length > 0) {
+    this.table.$emit('selection-change', states.selection);
+  }
 };

 TableStore.prototype.toggleRowSelection = function(row, selected) {
-  toggleRowSelection(this.states, row, selected);
+  const changed = toggleRowSelection(this.states, row, selected);
+  if (changed) {
+    this.table.$emit('selection-change', this.states.selection);
+  }
 };

 TableStore.prototype.cleanSelection = function() {
@@ -313,21 +320,31 @@ TableStore.prototype.updateAllSelected = function() {
  };

  let isAllSelected = true;
+  let selectedCount = 0;
  for (let i = 0, j = data.length; i < j; i++) {
    const item = data[i];
    if (selectable) {
-      if (selectable.call(null, item, i) && !isSelected(item)) {
-        isAllSelected = false;
-        break;
+      const isRowSelectable = selectable.call(null, item, i);
+      if (isRowSelectable) {
+        if (!isSelected(item)) {
+          isAllSelected = false;
+          break;
+        } else {
+          selectedCount++;
+        }
      }
    } else {
      if (!isSelected(item)) {
        isAllSelected = false;
        break;
+      } else {
+        selectedCount++;
      }
    }
  }

+  if (selectedCount === 0) isAllSelected = false;
+
  states.isAllSelected = isAllSelected;
 };

--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@@ -3,7 +3,7 @@
    :class="{ 'el-table--fit': fit, 'el-table--striped': stripe, 'el-table--border': border }"
    @mouseleave="handleMouseLeave($event)">
    <div class="hidden-columns" ref="hiddenColumns"><slot></slot></div>
-    <div class="el-table__header-wrapper" ref="headerWrapper">
+    <div class="el-table__header-wrapper" ref="headerWrapper" v-if="showHeader">
      <table-header
        :store="store"
        :layout="layout"
@@ -14,6 +14,7 @@
    <div class="el-table__body-wrapper" ref="bodyWrapper"
      :style="{ height: layout.bodyHeight ? layout.bodyHeight + 'px' : '' }">
      <table-body
+        :context="context"
        :store="store"
        :layout="layout"
        :row-class-name="rowClassName"
@@ -25,12 +26,12 @@
      </div>
    </div>
    <div class="el-table__fixed" ref="fixedWrapper"
+      v-if="fixedColumns.length > 0"
      :style="{
        width: layout.fixedWidth ? layout.fixedWidth + 'px' : '',
        height: layout.viewportHeight ? layout.viewportHeight + 'px' : ''
      }">
-      <div class="el-table__fixed-header-wrapper" ref="fixedHeaderWrapper"
-        v-if="fixedColumns.length > 0">
+      <div class="el-table__fixed-header-wrapper" ref="fixedHeaderWrapper" v-if="showHeader">
        <table-header
          fixed="left"
          :border="border"
@@ -39,7 +40,6 @@
          :style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }"></table-header>
      </div>
      <div class="el-table__fixed-body-wrapper" ref="fixedBodyWrapper"
-        v-if="fixedColumns.length > 0"
        :style="{
          top: layout.headerHeight + 'px',
          height: layout.fixedBodyHeight ? layout.fixedBodyHeight + 'px' : ''
@@ -55,13 +55,13 @@
      </div>
    </div>
    <div class="el-table__fixed-right" ref="rightFixedWrapper"
+      v-if="rightFixedColumns.length > 0"
      :style="{
        width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '',
        height: layout.viewportHeight ? layout.viewportHeight + 'px' : '',
        right: layout.scrollY ? layout.gutterWidth + 'px' : ''
      }">
-      <div class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper"
-        v-if="rightFixedColumns.length > 0">
+      <div class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper" v-if="showHeader">
        <table-header
          fixed="right"
          :border="border"
@@ -70,7 +70,6 @@
          :style="{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' }"></table-header>
      </div>
      <div class="el-table__fixed-body-wrapper" ref="rightFixedBodyWrapper"
-        v-if="rightFixedColumns.length > 0"
        :style="{
          top: layout.headerHeight + 'px',
          height: layout.fixedBodyHeight ? layout.fixedBodyHeight + 'px' : ''
@@ -131,13 +130,22 @@

      rowKey: [String, Function],

+      context: {},
+
+      showHeader: {
+        type: Boolean,
+        default: true
+      },
+
      rowClassName: [String, Function],

      highlightCurrentRow: Boolean,

      emptyText: {
        type: String,
-        default: t('el.table.emptyText')
+        default() {
+          return t('el.table.emptyText');
+        }
      }
    },

@@ -287,7 +295,8 @@
      const layout = new TableLayout({
        store,
        table: this,
-        fit: this.fit
+        fit: this.fit,
+        showHeader: this.showHeader
      });
      return {
        store,
--- a/packages/theme-default/package.json
+++ b/packages/theme-default/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-theme-default",
-  "version": "1.0.1",
+  "version": "1.0.2",
  "description": "Element component default theme.",
  "main": "lib/index.css",
  "style": "lib/index.css",
--- a/packages/theme-default/src/button.css
+++ b/packages/theme-default/src/button.css
@@ -23,7 +23,8 @@
    
    @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);

-    &:hover {
+    &:hover,
+    &:focus {
      color: var(--color-primary);
      border-color: @color;
    }
@@ -45,7 +46,8 @@
    }

    @when plain {
-      &:hover {
+      &:hover,
+      &:focus {
        background: #fff;
        border-color: var(--color-primary);
        color: var(--color-primary);
@@ -66,7 +68,8 @@

    @when disabled {
      &,
-      &:hover {
+      &:hover,
+      &:focus {
        color: var(--button-disabled-color);
        cursor: not-allowed;
        background-image: none;
@@ -80,7 +83,8 @@

      &.is-plain {
        &,
-        &:hover {
+        &:hover,
+        &:focus {
          background-color: #fff;
          border-color: #d3dce6;
          color: #C0CCDA;
@@ -135,7 +139,8 @@
      padding-left: 0;
      padding-right: 0;

-      &:hover {
+      &:hover,
+      &:focus {
        color: tint(var(--color-primary), var(--button-hover-tint-percent));
      }
      &:active {
@@ -171,6 +176,7 @@
      }

      &:hover,
+      &:focus,
      &:active {
        z-index: 1;
      }
--- a/packages/theme-default/src/col.css
+++ b/packages/theme-default/src/col.css
@@ -32,17 +32,17 @@
    .el-col-sm-$i {
      width: calc(1 / 24 * $(i) * 100)%;
    }
-  }
-  .el-col-xs-offset-$i {
-    margin-left: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-xs-pull-$i {
-    position: relative;
-    right: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-xs-push-$i {
-    position: relative;
-    left: calc(1 / 24 * $(i) * 100)%;
+    .el-col-xs-offset-$i {
+      margin-left: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-xs-pull-$i {
+      position: relative;
+      right: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-xs-push-$i {
+      position: relative;
+      left: calc(1 / 24 * $(i) * 100)%;
+    }
  }
 }
@media (min-width: 992px) {
@@ -50,17 +50,17 @@
    .el-col-md-$i {
      width: calc(1 / 24 * $(i) * 100)%;
    }
-  }
-  .el-col-md-offset-$i {
-    margin-left: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-md-pull-$i {
-    position: relative;
-    right: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-md-push-$i {
-    position: relative;
-    left: calc(1 / 24 * $(i) * 100)%;
+    .el-col-md-offset-$i {
+      margin-left: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-md-pull-$i {
+      position: relative;
+      right: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-md-push-$i {
+      position: relative;
+      left: calc(1 / 24 * $(i) * 100)%;
+    }
  }
 }
@media (min-width: 1200px) {
@@ -68,16 +68,16 @@
    .el-col-lg-$i {
      width: calc(1 / 24 * $(i) * 100)%;
    }
-  }
-  .el-col-xs-offset-$i {
-    margin-left: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-xs-pull-$i {
-    position: relative;
-    right: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-xs-push-$i {
-    position: relative;
-    left: calc(1 / 24 * $(i) * 100)%;
+    .el-col-xs-offset-$i {
+      margin-left: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-xs-pull-$i {
+      position: relative;
+      right: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-xs-push-$i {
+      position: relative;
+      left: calc(1 / 24 * $(i) * 100)%;
+    }
  }
 }
--- a/packages/theme-default/src/input.css
+++ b/packages/theme-default/src/input.css
@@ -99,6 +99,7 @@
  }

  @b input-group {
+    line-height: normal;
    display: table;
    border-collapse: separate;

--- a/packages/theme-default/src/mixins/_button.css
+++ b/packages/theme-default/src/mixins/_button.css
@@ -3,7 +3,8 @@
  background-color: $background-color;
  border-color: $border-color;

-  &:hover {
+  &:hover,
+  &:focus {
    background: tint($background-color, var(--button-hover-tint-percent));
    border-color: tint($border-color, var(--button-hover-tint-percent));
    color: $color;
@@ -27,7 +28,8 @@
    border: var(--border-base);
    color: var(--button-default-color);

-    &:hover {
+    &:hover,
+    &:focus {
      background: #fff;
      border-color: $border-color;
      color: $background-color;
--- a/packages/theme-default/src/table.css
+++ b/packages/theme-default/src/table.css
@@ -296,6 +296,7 @@
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
+      word-break: break-all;
      line-height: 24px;
      padding-left: 18px;
      padding-right: 18px;
--- a/packages/tree/src/tree.vue
+++ b/packages/tree/src/tree.vue
@@ -25,7 +25,9 @@
      },
      emptyText: {
        type: String,
-        default: t('el.tree.emptyText')
+        default() {
+          return t('el.tree.emptyText');
+        }
      },
      nodeKey: String,
      checkStrictly: Boolean,
--- a/src/index.js
+++ b/src/index.js
@@ -131,11 +131,10 @@ if (typeof window !== 'undefined' && window.Vue) {
 };

 module.exports = {
-  version: '1.0.1',
+  version: '1.0.2',
  locale: locale.use,
  install,
-  Loading: Loading.directive,
-  LoadingService: Loading.service,
+  Loading,
  Pagination,
  Dialog,
  Autocomplete,
--- a/src/locale/lang/da.js
+++ b/src/locale/lang/da.js
@@ -0,0 +1,85 @@
+export default {
+  el: {
+    datepicker: {
+      now: 'Nu',
+      today: 'I dag',
+      cancel: 'Annuller',
+      clear: 'Ryd',
+      confirm: 'OK',
+      selectDate: 'Vælg dato',
+      selectTime: 'Vælg tidspunkt',
+      startDate: 'Startdato',
+      startTime: 'Starttidspunkt',
+      endDate: 'Slutdato',
+      endTime: 'Sluttidspunkt',
+      year: 'År',
+      month1: 'Januar',
+      month2: 'Februar',
+      month3: 'Marts',
+      month4: 'April',
+      month5: 'Maj',
+      month6: 'Juni',
+      month7: 'Juli',
+      month8: 'August',
+      month9: 'September',
+      month10: 'Oktober',
+      month11: 'November',
+      month12: 'December',
+      week: 'uge',
+      weeks: {
+        sun: 'Søn',
+        mon: 'Man',
+        tue: 'Tir',
+        wed: 'Ons',
+        thu: 'Tor',
+        fri: 'Fre',
+        sat: 'Lør'
+      },
+      months: {
+        jan: 'Jan',
+        feb: 'Feb',
+        mar: 'Mar',
+        apr: 'Apr',
+        may: 'Maj',
+        jun: 'Jun',
+        jul: 'Jul',
+        aug: 'Aug',
+        sep: 'Sep',
+        oct: 'Okt',
+        nov: 'Nov',
+        dec: 'Dec'
+      }
+    },
+    select: {
+      loading: 'Henter',
+      noMatch: 'Ingen matchende data',
+      noData: 'Ingen data',
+      placeholder: 'Vælg'
+    },
+    pagination: {
+      goto: 'Gå til',
+      pagesize: '/side',
+      total: 'Total {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      confirm: 'OK',
+      cancel: 'Annuller',
+      error: 'Ugyldig input'
+    },
+    upload: {
+      delete: 'Slet',
+      preview: 'Forhåndsvisning',
+      continue: 'Fortsæt'
+    },
+    table: {
+      emptyText: 'Ingen data',
+      confirmFilter: 'Bekræft',
+      resetFilter: 'Nulstil',
+      clearFilter: 'Alle'
+    },
+    tree: {
+      emptyText: 'Ingen data'
+    }
+  }
+};
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -63,6 +63,7 @@ export default {
      pageClassifier: ''
    },
    messagebox: {
+      title: 'Message',
      confirm: 'OK',
      cancel: 'Cancel',
      error: 'Illegal input'
--- a/src/locale/lang/es.js
+++ b/src/locale/lang/es.js
@@ -0,0 +1,85 @@
+export default {
+  el: {
+    datepicker: {
+      now: 'Ahora',
+      today: 'Hoy',
+      cancel: 'Cancelar',
+      clear: 'Limpiar',
+      confirm: 'Confirmar',
+      selectDate: 'Seleccionar fecha',
+      selectTime: 'Seleccionar hora',
+      startDate: 'Fecha de Inicio',
+      startTime: 'Hora de Inicio',
+      endDate: 'Fecha Final',
+      endTime: 'Hora Final',
+      year: 'Año',
+      month1: 'Enero',
+      month2: 'Febrero',
+      month3: 'Marzo',
+      month4: 'Abril',
+      month5: 'Mayo',
+      month6: 'Junio',
+      month7: 'Julio',
+      month8: 'Agosto',
+      month9: 'Septiembre',
+      month10: 'Octubre',
+      month11: 'Noviembre',
+      month12: 'Diciembre',
+      // week: 'semana',
+      weeks: {
+        sun: 'Dom',
+        mon: 'Lun',
+        tue: 'Mar',
+        wed: 'Mié',
+        thu: 'Jue',
+        fri: 'Vie',
+        sat: 'Sáb'
+      },
+      months: {
+        jan: 'Ene',
+        feb: 'Feb',
+        mar: 'Mar',
+        apr: 'Abr',
+        may: 'May',
+        jun: 'Jun',
+        jul: 'Jul',
+        aug: 'Ago',
+        sep: 'Sep',
+        oct: 'Oct',
+        nov: 'Nov',
+        dec: 'Dic'
+      }
+    },
+    select: {
+      loading: 'Cargando',
+      noMatch: 'No hay datos que coincidan',
+      noData: 'Sin datos',
+      placeholder: 'Seleccionar'
+    },
+    pagination: {
+      goto: 'Ir a',
+      pagesize: '/pagina',
+      total: 'Total {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      confirm: 'Aceptar',
+      cancel: 'Cancelar',
+      error: 'Entrada inválida'
+    },
+    upload: {
+      delete: 'Eliminar',
+      preview: 'Vista Previa',
+      continue: 'Continuar'
+    },
+    table: {
+      emptyText: 'Sin Datos',
+      confirmFilter: 'Confirmar',
+      resetFilter: 'Limpiar',
+      clearFilter: 'Todo'
+    },
+    tree: {
+      emptyText: 'Sin Datos'
+    }
+  }
+};
--- a/src/locale/lang/fr.js
+++ b/src/locale/lang/fr.js
@@ -0,0 +1,85 @@
+export default {
+  el: {
+    datepicker: {
+      now: 'Maintenant',
+      today: 'Auj.',
+      cancel: 'Annuler',
+      clear: 'Effacer',
+      confirm: 'OK',
+      selectDate: 'Choisir date',
+      selectTime: 'Choisir horaire',
+      startDate: 'Date début',
+      startTime: 'Horaire début',
+      endDate: 'Date fin',
+      endTime: 'Horaire fin',
+      year: 'Année',
+      month1: 'Janvier',
+      month2: 'Février',
+      month3: 'Mars',
+      month4: 'Avril',
+      month5: 'Mai',
+      month6: 'Juin',
+      month7: 'Juillet',
+      month8: 'Août',
+      month9: 'Septembre',
+      month10: 'Octobre',
+      month11: 'Novembre',
+      month12: 'Décembre',
+      // week: 'Semaine',
+      weeks: {
+        sun: 'Dim',
+        mon: 'Lun',
+        tue: 'Mar',
+        wed: 'Mer',
+        thu: 'Jeu',
+        fri: 'Ven',
+        sat: 'Sam'
+      },
+      months: {
+        jan: 'Jan',
+        feb: 'Fév',
+        mar: 'Mar',
+        apr: 'Avr',
+        may: 'Mai',
+        jun: 'Jun',
+        jul: 'Jul',
+        aug: 'Aoû',
+        sep: 'Sep',
+        oct: 'Oct',
+        nov: 'Nov',
+        dec: 'Déc'
+      }
+    },
+    select: {
+      loading: 'Chargement',
+      noMatch: 'Aucune correspondance',
+      noData: 'Aucun résultat',
+      placeholder: 'Choisir'
+    },
+    pagination: {
+      goto: 'Aller à',
+      pagesize: '/page',
+      total: 'Total {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      confirm: 'Confirmer',
+      cancel: 'Annuler',
+      error: 'Erreur'
+    },
+    upload: {
+      delete: 'Supprimer',
+      preview: 'Aperçu',
+      continue: 'Continuer'
+    },
+    table: {
+      emptyText: 'Aucune donnée',
+      confirmFilter: 'Confirmer',
+      resetFilter: 'Réinitialiser',
+      clearFilter: 'Tous'
+    },
+    tree: {
+      emptyText: 'Aucune donnée'
+    }
+  }
+};
--- a/src/locale/lang/it.js
+++ b/src/locale/lang/it.js
@@ -0,0 +1,85 @@
+export default {
+  el: {
+    datepicker: {
+      now: 'Ora',
+      today: 'Oggi',
+      cancel: 'Cancella',
+      clear: 'Pulisci',
+      confirm: 'OK',
+      selectDate: 'Seleziona data',
+      selectTime: 'Seleziona ora',
+      startDate: 'Data inizio',
+      startTime: 'Ora inizio',
+      endDate: 'Data fine',
+      endTime: 'Ora fine',
+      year: 'Anno',
+      month1: 'Gennaio',
+      month2: 'Febbraio',
+      month3: 'Marzo',
+      month4: 'Aprile',
+      month5: 'Maggio',
+      month6: 'Giugno',
+      month7: 'Luglio',
+      month8: 'Agosto',
+      month9: 'Settembre',
+      month10: 'Ottobre',
+      month11: 'Novembre',
+      month12: 'Dicembre',
+      // week: 'settimana',
+      weeks: {
+        sun: 'Dom',
+        mon: 'Lun',
+        tue: 'Mar',
+        wed: 'Mer',
+        thu: 'Gio',
+        fri: 'Ven',
+        sat: 'Sab'
+      },
+      months: {
+        jan: 'Gen',
+        feb: 'Feb',
+        mar: 'Mar',
+        apr: 'Apr',
+        may: 'Mag',
+        jun: 'Giu',
+        jul: 'Lug',
+        aug: 'Ago',
+        sep: 'Set',
+        oct: 'Ott',
+        nov: 'Nov',
+        dec: 'Dic'
+      }
+    },
+    select: {
+      loading: 'Caricamento',
+      noMatch: 'Nessuna corrispondenza',
+      noData: 'Nessun risultato',
+      placeholder: 'Seleziona'
+    },
+    pagination: {
+      goto: 'Vai a',
+      pagesize: '/page',
+      total: 'Totale {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      confirm: 'OK',
+      cancel: 'Cancella',
+      error: 'Input non valido'
+    },
+    upload: {
+      delete: 'Cancella',
+      preview: 'Anteprima',
+      continue: 'Continua'
+    },
+    table: {
+      emptyText: 'Nessun dato',
+      confirmFilter: 'Conferma',
+      resetFilter: 'Reset',
+      clearFilter: 'Tutti'
+    },
+    tree: {
+      emptyText: 'Nessun dato'
+    }
+  }
+};
--- a/src/locale/lang/ja.js
+++ b/src/locale/lang/ja.js
@@ -0,0 +1,86 @@
+export default {
+  el: {
+    datepicker: {
+      now: '今',
+      today: '今日',
+      cancel: 'キャンセルする',
+      clear: 'クリヤー',
+      confirm: 'はい',
+      selectDate: '日付を入力',
+      selectTime: '時間を入力',
+      startDate: '開始日',
+      startTime: '開始時間',
+      endDate: '終了日',
+      endTime: '終了時間',
+      year: '年',
+      month1: '一月',
+      month2: '二月',
+      month3: '三月',
+      month4: '四月',
+      month5: '五月',
+      month6: '六月',
+      month7: '七月',
+      month8: '八月',
+      month9: '九月',
+      month10: '十月',
+      month11: '十一月',
+      month12: '十二月',
+      // week: 'week',
+      weeks: {
+        sun: '日',
+        mon: '月',
+        tue: '火',
+        wed: '水',
+        thu: '木',
+        fri: '金',
+        sat: '土'
+      },
+      months: {
+        jan: '一月',
+        feb: '二月',
+        mar: '三月',
+        apr: '四月',
+        may: '五月',
+        jun: '六月',
+        jul: '七月',
+        aug: '八月',
+        sep: '九月',
+        oct: '十月',
+        nov: '十一月',
+        dec: '十二月'
+      }
+    },
+    select: {
+      loading: 'ロード中',
+      noMatch: 'データなし',
+      noData: 'データなし',
+      placeholder: 'セレクター'
+    },
+    pagination: {
+      goto: '',
+      pagesize: '件/頁',
+      total: '総計 {total} 件',
+      pageClassifier: 'に跳ぶ'
+    },
+    messagebox: {
+      title: 'メッセージ',
+      confirm: 'はい',
+      cancel: 'キャンセルする',
+      error: 'エラー'
+    },
+    upload: {
+      delete: '削除する',
+      preview: 'プレビュー',
+      continue: '次の件をアップロードする'
+    },
+    table: {
+      emptyText: 'データなし',
+      confirmFilter: 'フィルターする',
+      resetFilter: 'リセットする',
+      clearFilter: 'すべて'
+    },
+    tree: {
+      emptyText: 'データなし'
+    }
+  }
+};
--- a/src/locale/lang/ko.js
+++ b/src/locale/lang/ko.js
@@ -0,0 +1,86 @@
+export default {
+  el: {
+    datepicker: {
+      now: '지금',
+      today: '오늘',
+      cancel: '취소',
+      clear: '초기화',
+      confirm: '확인',
+      selectDate: '날짜 선택',
+      selectTime: '시간 선택',
+      startDate: '시작 날짜',
+      startTime: '시작 시간',
+      endDate: '종료 날짜',
+      endTime: '종료 시간',
+      year: '년',
+      month1: '1월',
+      month2: '2월',
+      month3: '3월',
+      month4: '4월',
+      month5: '5월',
+      month6: '6월',
+      month7: '7월',
+      month8: '8월',
+      month9: '9월',
+      month10: '10월',
+      month11: '11월',
+      month12: '12월',
+      // week: 'week',
+      weeks: {
+        sun: '일',
+        mon: '월',
+        tue: '화',
+        wed: '수',
+        thu: '목',
+        fri: '금',
+        sat: '토'
+      },
+      months: {
+        jan: '1월',
+        feb: '2월',
+        mar: '3월',
+        apr: '4월',
+        may: '5월',
+        jun: '6월',
+        jul: '7월',
+        aug: '8월',
+        sep: '9월',
+        oct: '10월',
+        nov: '11월',
+        dec: '12월'
+      }
+    },
+    select: {
+      loading: '불러오는 중',
+      noMatch: '맞는 데이터가 없습니다',
+      noData: '데이터 없음',
+      placeholder: '선택'
+    },
+    pagination: {
+      goto: '이동',
+      pagesize: '/page',
+      total: '총 {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: '메시지',
+      confirm: '확인',
+      cancel: '취소',
+      error: '올바르지 않은 입력'
+    },
+    upload: {
+      delete: '삭제',
+      preview: '미리보기',
+      continue: '계속하기'
+    },
+    table: {
+      emptyText: '데이터 없음',
+      confirmFilter: '확인',
+      resetFilter: '초기화',
+      clearFilter: '전체'
+    },
+    tree: {
+      emptyText: '데이터 없음'
+    }
+  }
+};
--- a/src/locale/lang/nb-NO.js
+++ b/src/locale/lang/nb-NO.js
@@ -0,0 +1,85 @@
+export default {
+  el: {
+    datepicker: {
+      now: 'Nå',
+      today: 'I dag',
+      cancel: 'Avbryt',
+      clear: 'Tøm',
+      confirm: 'OK',
+      selectDate: 'Velg dato',
+      selectTime: 'Velg tidspunkt',
+      startDate: 'Start Dato',
+      startTime: 'Start Tidspunkt',
+      endDate: 'Sluttdato',
+      endTime: 'Sluttidspunkt',
+      year: '',
+      month1: 'Januar',
+      month2: 'Februar',
+      month3: 'Mars',
+      month4: 'April',
+      month5: 'Mai',
+      month6: 'Juni',
+      month7: 'Juli',
+      month8: 'August',
+      month9: 'September',
+      month10: 'Oktober',
+      month11: 'November',
+      month12: 'Desember',
+      // week: 'week',
+      weeks: {
+        sun: 'Søn',
+        mon: 'Man',
+        tue: 'Tir',
+        wed: 'Ons',
+        thu: 'Tor',
+        fri: 'Fre',
+        sat: 'Lør'
+      },
+      months: {
+        jan: 'Jan',
+        feb: 'Feb',
+        mar: 'Mar',
+        apr: 'Apr',
+        may: 'Mai',
+        jun: 'Jun',
+        jul: 'Jul',
+        aug: 'Aug',
+        sep: 'Sep',
+        oct: 'Okt',
+        nov: 'Nov',
+        dec: 'Des'
+      }
+    },
+    select: {
+      loading: 'Laster',
+      noMatch: 'Ingen samsvarende data',
+      noData: 'Ingen data',
+      placeholder: 'Velg'
+    },
+    pagination: {
+      goto: 'Gå til',
+      pagesize: '/side',
+      total: 'Total {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      confirm: 'OK',
+      cancel: 'Avbryt',
+      error: 'Ugyldig input'
+    },
+    upload: {
+      delete: 'Slett',
+      preview: 'Forhåndsvisning',
+      continue: 'Fortsett'
+    },
+    table: {
+      emptyText: 'Ingen Data',
+      confirmFilter: 'Bekreft',
+      resetFilter: 'Tilbakestill',
+      clearFilter: 'Alle'
+    },
+    tree: {
+      emptyText: 'Ingen Data'
+    }
+  }
+};
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -63,6 +63,7 @@ export default {
      pageClassifier: '页'
    },
    messagebox: {
+      title: '提示',
      confirm: '确定',
      cancel: '取消',
      error: '输入的数据不合法!'
--- a/src/locale/lang/zh-TW.js
+++ b/src/locale/lang/zh-TW.js
@@ -0,0 +1,86 @@
+export default {
+  el: {
+    datepicker: {
+      now: '現在',
+      today: '今天',
+      cancel: '取消',
+      clear: '清空',
+      confirm: '確認',
+      selectDate: '選擇日期',
+      selectTime: '選擇時間',
+      startDate: '開始日期',
+      startTime: '開始時間',
+      endDate: '結束日期',
+      endTime: '結束時間',
+      year: '年',
+      month1: '1 月',
+      month2: '2 月',
+      month3: '3 月',
+      month4: '4 月',
+      month5: '5 月',
+      month6: '6 月',
+      month7: '7 月',
+      month8: '8 月',
+      month9: '9 月',
+      month10: '10 月',
+      month11: '11 月',
+      month12: '12 月',
+      // week: '周次',
+      weeks: {
+        sun: '日',
+        mon: '一',
+        tue: '二',
+        wed: '三',
+        thu: '四',
+        fri: '五',
+        sat: '六'
+      },
+      months: {
+        jan: '一月',
+        feb: '二月',
+        mar: '三月',
+        apr: '四月',
+        may: '五月',
+        jun: '六月',
+        jul: '七月',
+        aug: '八月',
+        sep: '九月',
+        oct: '十月',
+        nov: '十一月',
+        dec: '十二月'
+      }
+    },
+    select: {
+      loading: '加載中',
+      noMatch: '無匹配資料',
+      noData: '無資料',
+      placeholder: '請選擇'
+    },
+    pagination: {
+      goto: '前往',
+      pagesize: '項/頁',
+      total: '共 {total} 項',
+      pageClassifier: '頁'
+    },
+    messagebox: {
+      title: '提示',
+      confirm: '確定',
+      cancel: '取消',
+      error: '輸入的資料不符規定!'
+    },
+    upload: {
+      delete: '刪除',
+      preview: '查看圖片',
+      continue: '繼續上傳'
+    },
+    table: {
+      emptyText: '暫無資料',
+      confirmFilter: '篩選',
+      resetFilter: '重置',
+      clearFilter: '全部'
+    },
+    tree: {
+      emptyText: '暫無資料'
+    }
+  }
+};
--- a/src/utils/popper.js
+++ b/src/utils/popper.js
@@ -1042,7 +1042,13 @@
     * @returns {Element} offset parent
     */
    function getScrollParent(element) {
-        if (element === root.document) {
+        var parent = element.parentNode;
+
+        if (!parent) {
+            return element;
+        }
+
+        if (parent === root.document) {
            // Firefox puts the scrollTOp value on `documentElement` instead of `body`, we then check which of them is
            // greater than 0 and return the proper element
            if (root.document.body.scrollTop) {
@@ -1054,16 +1060,16 @@

        // Firefox want us to check `-x` and `-y` variations as well
        if (
-            ['scroll', 'auto'].indexOf(getStyleComputedProperty(element, 'overflow')) !== -1 ||
-            ['scroll', 'auto'].indexOf(getStyleComputedProperty(element, 'overflow-x')) !== -1 ||
-            ['scroll', 'auto'].indexOf(getStyleComputedProperty(element, 'overflow-y')) !== -1
+            ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow')) !== -1 ||
+            ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-x')) !== -1 ||
+            ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-y')) !== -1
        ) {
            // If the detected scrollParent is body, we perform an additional check on its parentNode
            // in this way we'll get body if the browser is Chrome-ish, or documentElement otherwise
            // fixes issue #65
-            return element === root.document.body ? getScrollParent(element.parentNode) : element;
+            return parent;
        }
-        return element.parentNode ? getScrollParent(element.parentNode) : element;
+        return getScrollParent(element.parentNode);
    }

    /**
--- a/test/unit/specs/alert.spec.js
+++ b/test/unit/specs/alert.spec.js
@@ -36,6 +36,35 @@ describe('Alert', () => {
      .to.equal('Unbowed, Unbent, Unbroken');
  });

+  it('render-content', () => {
+    vm = createVue({
+      data() {
+        return {
+          text: 'test'
+        };
+      },
+      template: `
+        <div>
+          <el-alert
+            title="test"
+            :render-content="customContent"></el-alert>
+        </div>
+      `,
+      methods: {
+        customContent(h) {
+          return (
+            <p>
+              <el-button class="custom-button">{ this.text }</el-button>
+            </p>
+          );
+        }
+      }
+    }, true);
+    let button = vm.$el.querySelector('.custom-button');
+    expect(button).to.exist;
+    expect(button.textContent).to.equal('test');
+  });
+
  it('close', () => {
    vm = createVue({
      template: `
--- a/test/unit/specs/table.spec.js
+++ b/test/unit/specs/table.spec.js
@@ -116,6 +116,15 @@ describe('Table', () => {
      }, DELAY);
    });

+    it('show-header', done => {
+      const vm = createTable(':show-header="false"');
+      setTimeout(_ => {
+        expect(vm.$el.querySelectorAll('.el-table__header-wrapper').length).to.equal(0);
+        destroyVM(vm);
+        done();
+      }, DELAY);
+    });
+
    it('tableRowClassName', done => {
      const vm = createTable(':row-class-name="tableRowClassName"', {
        methods: {
@@ -384,6 +393,20 @@ describe('Table', () => {
        }, DELAY);
      }, DELAY);
    });
+
+    it('header-click', done => {
+      const vm = createTable('header-click');
+
+      setTimeout(_ => {
+        const cell = vm.$el.querySelectorAll('.el-table__header th')[1]; // header[prop='name']
+
+        triggerEvent(cell, 'click');
+        expect(vm.result).to.length(2); // column, event
+        expect(vm.result[0]).to.have.property('property').to.equal('name');
+        destroyVM(vm);
+        done();
+      }, DELAY);
+    });
  });

  describe('column attributes', () => {
@@ -623,6 +646,48 @@ describe('Table', () => {
      }, DELAY);
    });

+    it('selectable === false & check selectAll status', done => {
+      const vm = createVue({
+        template: `
+          <el-table :data="testData" @selection-change="change">
+            <el-table-column type="selection" :selectable="filterSelect" />
+            <el-table-column prop="name" label="name" />
+            <el-table-column prop="release" label="release" />
+            <el-table-column prop="director" label="director" />
+            <el-table-column prop="runtime" label="runtime" />
+          </el-table>
+        `,
+
+        created() {
+        },
+
+        data() {
+          return { selected: [], testData: null };
+        },
+
+        methods: {
+          change(rows) {
+            this.selected = rows;
+          },
+
+          filterSelect(row, index) {
+            return false;
+          }
+        }
+      }, true);
+
+      vm.testData = getTestData();
+
+      setTimeout(_ => {
+        expect(vm.$el.querySelector('.el-checkbox').__vue__.checked).to.be.false;
+        setTimeout(_ => {
+          expect(vm.selected).to.length(0);
+          destroyVM(vm);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
    it('emit selection-change after row has been removed', done => {
      const vm = createVue({
        template: `
@@ -920,6 +985,71 @@ describe('Table', () => {
    });
  });

+  describe('methods', () => {
+    const createTable = function(prop = '', opts) {
+      return createVue({
+        template: `
+          <el-table ref="table" :data="testData" @${prop}="handleEvent">
+            <el-table-column type="selection" />
+            <el-table-column prop="name" />
+            <el-table-column prop="release" />
+            <el-table-column prop="director" />
+            <el-table-column prop="runtime"/>
+          </el-table>
+        `,
+
+        methods: {
+          handleEvent(selection) {
+            this.fireCount++;
+            this.selection = selection;
+          }
+        },
+
+        created() {
+          this.testData = getTestData();
+        },
+
+        data() {
+          return { selection: null, testData: this.testData, fireCount: 0 };
+        }
+      }, true);
+    };
+
+    it('toggleRowSelection', () => {
+      const vm = createTable('selection-change');
+      vm.$refs.table.toggleRowSelection(vm.testData[0]);
+      expect(vm.selection).to.length(1);
+      expect(vm.fireCount).to.equal(1);
+
+      // test use second parameter
+      vm.$refs.table.toggleRowSelection(vm.testData[0], true);
+      expect(vm.fireCount).to.equal(1);
+
+      vm.$refs.table.toggleRowSelection(vm.testData[0], false);
+      expect(vm.fireCount).to.equal(2);
+      expect(vm.selection).to.length(0);
+
+      destroyVM(vm);
+    });
+
+    it('clearSelection', () => {
+      const vm = createTable('selection-change');
+      vm.$refs.table.toggleRowSelection(vm.testData[0]);
+      expect(vm.selection).to.length(1);
+      expect(vm.fireCount).to.equal(1);
+
+      // clear selection
+      vm.$refs.table.clearSelection();
+      expect(vm.fireCount).to.equal(2);
+      expect(vm.selection).to.length(0);
+
+      vm.$refs.table.clearSelection();
+      expect(vm.fireCount).to.equal(2);
+
+      destroyVM(vm);
+    });
+  });
+
  it('hover', done => {
    const vm = createVue({
      template: `
Author	SHA1	Message	Date
Leopoldthecoder	35b979da54	[release] 1.0.2	2016-11-18 20:08:56 +08:00
Leopoldthecoder	2e931cff96	[build] 1.0.2	2016-11-18 20:08:55 +08:00
Leopoldthecoder	a49dd868a4	Merge branch 'dev' of github.com:ElemeFE/element into dev	2016-11-18 20:04:54 +08:00
Leopoldthecoder	d7dd6cecb4	update release script	2016-11-18 20:03:20 +08:00
qingwei.li	c6d6b32c5e	Fix some bug	2016-11-18 20:03:20 +08:00
qingwei.li	37510831ca	Update: release script	2016-11-18 20:03:20 +08:00
Leopoldthecoder	528067f3cd	Changelog: update to 1.0.2	2016-11-18 20:03:20 +08:00
baiyaaaaa	3da91213ce	improve form validate docs	2016-11-18 20:03:19 +08:00
杨奕	897ec4650c	Select: add focus listener (#1193 )	2016-11-18 20:03:19 +08:00
杨奕	deaee6ce7a	Homepage: add responsive (#1177 )	2016-11-18 20:03:19 +08:00
FuryBean	07b8ec030f	Table: fix selection-change not fire in some condition. (#1198 )	2016-11-18 20:03:19 +08:00
Leopoldthecoder	69b65037eb	Switch: fix @change timing bug	2016-11-18 20:03:18 +08:00
Leopoldthecoder	3861c55f86	i18n: use the right parentheses	2016-11-18 20:03:18 +08:00
furybean	0a31868b5f	Table: add show-header prop & add header-click event & make height more reasonable.	2016-11-18 20:03:18 +08:00
杨奕	4e423144a2	i18n: update language list (#1187 )	2016-11-18 20:03:18 +08:00
cinwell.li	4ebdd6a6d4	Table: add context prop (#1161 )	2016-11-18 20:03:18 +08:00
qingwei.li	ffc136fa8d	TimeSelect: fix 00:00 is disabled, fixed #676	2016-11-18 20:03:17 +08:00
YanagiEiichi	904a739499	Add ja.js	2016-11-18 20:03:17 +08:00
Leopoldthecoder	10cef46012	Table: update English doc	2016-11-18 20:03:17 +08:00
furybean	bd8bf7bf35	Table: fix fixed column won't disappear in some condition.	2016-11-18 20:03:17 +08:00
furybean	012c0185f2	Table: fix select-all checkbox is selected when all rows are not selectable.	2016-11-18 20:03:17 +08:00
ChangJoo Park	402a9abacb	Add Korean.	2016-11-18 20:03:16 +08:00
qingwei.li	bd7a4252a3	Fix release script	2016-11-18 20:03:16 +08:00
Ole Magnus Støvern	fe44366fce	Added Norwegian bokmål (#1164 ) Norway got two different written languages, this is the most common one.	2016-11-18 20:03:16 +08:00
Jan Van Bruggen	077c0cf73f	Docs: fix custom theme import path When `src/main.js` imports `theme/index.css`, the import statement should import `'../theme/index.css'`, not `'./theme/index.css'`.	2016-11-18 20:03:16 +08:00
tpy	4dfb12a98e	i18n for zh-TW (#1170 ) add traditional chinese translation	2016-11-18 20:03:16 +08:00
qingwei.li	d56ac5d3ae	CI: add elementt bot	2016-11-18 20:03:15 +08:00
Wanny Miarelli	11eaa98ac7	Italian Locale File	2016-11-18 20:03:15 +08:00
baiyaaaaa	c9ff94e267	fix popperjs get scrollParent bug (#1143 )	2016-11-18 20:03:15 +08:00
Leopoldthecoder	fc41cf4077	Alert: add render-content	2016-11-18 20:03:15 +08:00
qingwei.li	33ba9f5b0b	Loading: update doc	2016-11-18 20:03:15 +08:00
qingwei.li	a13b49b609	Locale: fix dynamic change locale	2016-11-18 20:03:14 +08:00
Leopoldthecoder	faa27b9d99	Input: fix input-group line height	2016-11-18 20:03:14 +08:00
qingwei.li	3003aaa426	Loading: fix export module	2016-11-18 20:03:14 +08:00
qingwei.li	7b263b89ae	Update ci	2016-11-18 20:03:14 +08:00
杨奕	00cfee91bf	add dev notice in contributing guide (#1136 )	2016-11-18 20:03:14 +08:00
杨奕	edeae0a2a4	Button: add focus style (#1116 )	2016-11-18 20:03:13 +08:00
Henning Horn	a9703bb05c	Added Danish translation	2016-11-18 20:03:13 +08:00
baiyaaaaa	99eb9366eb	fix col responsive style bug	2016-11-18 20:03:13 +08:00
Waam	7dcbc9add2	typo	2016-11-18 20:03:13 +08:00
Ricardo	7a6cea0083	Patch 1 (#1119 ) * Create es.js Spanish translation. * Update es.js	2016-11-18 20:03:13 +08:00
Leopoldthecoder	cb6c54b405	update release script	2016-11-18 19:55:29 +08:00
qingwei.li	f7d2d720f4	Fix some bug	2016-11-18 19:44:31 +08:00
qingwei.li	d3a32d7343	Update: release script	2016-11-18 19:27:55 +08:00
Leopoldthecoder	d51635ae22	Changelog: update to 1.0.2	2016-11-18 18:54:37 +08:00
baiyaaaaa	4f29fc5534	improve form validate docs	2016-11-18 18:54:28 +08:00
杨奕	dd08623526	Select: add focus listener (#1193 )	2016-11-18 18:41:15 +08:00
杨奕	63b465086d	Homepage: add responsive (#1177 )	2016-11-18 16:49:07 +08:00
FuryBean	bca5fc1868	Table: fix selection-change not fire in some condition. (#1198 )	2016-11-18 16:43:48 +08:00
baiyaaaaa	b13bda7bcd	Merge pull request #1166 from Leopoldthecoder/switch-change Switch: fix @change timing bug, fixed #1162	2016-11-18 16:36:14 +08:00
Leopoldthecoder	77ef3836b1	Switch: fix @change timing bug	2016-11-18 16:32:00 +08:00
baiyaaaaa	2053742e90	Merge pull request #1173 from QingWei-Li/fix/release-sh Fix release script	2016-11-18 16:30:21 +08:00
baiyaaaaa	91c2940878	Merge pull request #1140 from QingWei-Li/fix/loading-export Loading: fix export module	2016-11-18 16:29:18 +08:00
杨奕	ea4e61ad40	Merge pull request #1195 from furybean/table-header-click Table: add show-header prop & add header-click event & make height mo…	2016-11-18 16:03:54 +08:00
Leopoldthecoder	fa5342ecf0	i18n: use the right parentheses	2016-11-18 16:00:58 +08:00
furybean	ffff83d094	Table: add show-header prop & add header-click event & make height more reasonable.	2016-11-18 15:59:00 +08:00
baiyaaaaa	f454d31378	Merge pull request #1185 from QingWei-Li/fix/select-time TimeSelect: fix 00:00 is disabled, fixed #676	2016-11-18 15:32:41 +08:00
杨奕	bc19f4f757	i18n: update language list (#1187 )	2016-11-18 15:04:19 +08:00
baiyaaaaa	aa05aeda6a	Merge pull request #1183 from Leopoldthecoder/table-doc Table: update English doc	2016-11-18 15:01:05 +08:00
cinwell.li	1239c98511	Table: add context prop (#1161 )	2016-11-18 15:00:22 +08:00
qingwei.li	c352961592	TimeSelect: fix 00:00 is disabled, fixed #676	2016-11-18 14:47:37 +08:00
杨奕	4c60c3e055	Merge pull request #1184 from YanagiEiichi/i18n-ja Add ja.js	2016-11-18 14:36:30 +08:00
YanagiEiichi	bc04f949a3	Add ja.js	2016-11-18 14:07:54 +08:00
Leopoldthecoder	a48838d08e	Table: update English doc	2016-11-18 13:59:33 +08:00
furybean	212cbf7a7b	Table: fix fixed column won't disappear in some condition.	2016-11-18 13:12:53 +08:00
杨奕	4addc0adb3	Merge pull request #1181 from furybean/fix-table-select-all Table: fix select-all checkbox is selected when all rows are not sele…	2016-11-18 12:39:38 +08:00
furybean	0a54bd41f1	Table: fix select-all checkbox is selected when all rows are not selectable.	2016-11-18 12:32:29 +08:00
ChangJoo Park	1dad71e170	Add Korean.	2016-11-18 12:15:36 +08:00
qingwei.li	6ac93e0bd2	Fix release script	2016-11-18 09:21:52 +08:00
Ole Magnus Støvern	0e35ab2e62	Added Norwegian bokmål (#1164 ) Norway got two different written languages, this is the most common one.	2016-11-18 07:51:20 +08:00
Jan Van Bruggen	a93d912e63	Docs: fix custom theme import path When `src/main.js` imports `theme/index.css`, the import statement should import `'../theme/index.css'`, not `'./theme/index.css'`.	2016-11-18 06:46:17 +08:00
baiyaaaaa	11d7da076d	Merge pull request #1169 from QingWei-Li/feat/add-bot CI: add element bot	2016-11-18 01:12:40 +08:00
tpy	d33d580948	i18n for zh-TW (#1170 ) add traditional chinese translation	2016-11-17 23:50:43 +08:00
qingwei.li	51acff04d7	CI: add elementt bot	2016-11-17 23:26:09 +08:00
杨奕	abe49ffb4a	Merge pull request #1167 from wannymiarelli/dev Italian Locale File	2016-11-17 22:11:38 +08:00
Wanny Miarelli	a346a6b4d0	Italian Locale File	2016-11-17 14:54:22 +01:00
baiyaaaaa	be00a80807	Merge pull request #1135 from QingWei-Li/feat/update-ci Update ci	2016-11-17 21:54:03 +08:00
baiyaaaaa	70449b73f4	fix popperjs get scrollParent bug (#1143 )	2016-11-17 21:47:10 +08:00
baiyaaaaa	7345ca7dfc	Merge pull request #1141 from Leopoldthecoder/input-group Input: fix input-group line height, fixed #1075	2016-11-17 19:30:00 +08:00
baiyaaaaa	c823c84f6f	Merge pull request #1145 from QingWei-Li/fix/multiple-locale Locale: fix dynamic change locale	2016-11-17 19:15:48 +08:00
baiyaaaaa	7b1b3b4e29	Merge pull request #1150 from Leopoldthecoder/alert-render Alert: add render-content, fixed #568	2016-11-17 19:12:37 +08:00
Leopoldthecoder	3bfa92ce4b	Alert: add render-content	2016-11-17 16:51:32 +08:00
qingwei.li	9f1c7af400	Loading: update doc	2016-11-17 15:44:13 +08:00
qingwei.li	87e171d300	Locale: fix dynamic change locale	2016-11-17 15:37:04 +08:00
Leopoldthecoder	51ec650221	Input: fix input-group line height	2016-11-17 14:33:04 +08:00
qingwei.li	b090d3eafb	Loading: fix export module	2016-11-17 14:30:25 +08:00
qingwei.li	2bd5a61790	Update ci	2016-11-17 14:10:10 +08:00
杨奕	98c9cca24c	fix doc typos (#1137 )	2016-11-17 12:24:33 +08:00
杨奕	5f496b36e0	add dev notice in contributing guide (#1136 )	2016-11-17 12:21:50 +08:00
杨奕	3e3a330758	Button: add focus style (#1116 )	2016-11-17 12:21:33 +08:00
Henning Horn	8177d0612c	Added Danish translation	2016-11-17 12:20:23 +08:00
baiyaaaaa	c9e180ff50	fix col responsive style bug	2016-11-17 12:20:01 +08:00
Waam	97eb762596	typo	2016-11-17 12:20:01 +08:00
Waam	463747f977	replace double quote	2016-11-17 12:20:01 +08:00
Waam	020b9ea459	add some abbreviations	2016-11-17 12:20:01 +08:00
Waam	2308c321c1	fr translation	2016-11-17 12:20:01 +08:00
Leopoldthecoder	d4aa5197af	fix doc typos	2016-11-17 11:02:24 +08:00
Ricardo	c29f63ac8b	Patch 1 (#1119 ) * Create es.js Spanish translation. * Update es.js	2016-11-17 08:27:56 +08:00
杨奕	e84a50700b	Merge pull request #1117 from waam/master fr translation	2016-11-17 00:02:48 +08:00
Waam	02828ed239	replace double quote	2016-11-16 16:57:33 +01:00
Waam	6a8fe43900	add some abbreviations	2016-11-16 16:49:08 +01:00
Waam	48783a3810	fr translation	2016-11-16 15:35:48 +01:00
Leopoldthecoder	27affb22c0	update index links	2016-11-16 19:39:43 +08:00